DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX基礎知識 >> ajax入門簡明教程---拖拽功能
ajax入門簡明教程---拖拽功能
編輯:AJAX基礎知識      日期:2016/12/27 14:11:39
   大家都有自己的博客吧,現在web2.0的項目裡,博客是個很熱門的東西啊。我們在博客裡可以用鼠標拖拽的方式定制我們的主頁。那麼這種奇妙的方式是怎麼實現的呢?這裡用的就是可拖放DOM的模式,這個只是一種用DOM解析的一種思想,其寫法有很多種。一會兒給大家列舉一種例子。先看HTML頁面:
<HTML>
<HEAD>
<title>拖拽定制窗口 百家拳軟件項目研究室</title>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<script language="javascript" src="drag.js"></script>
<link rel="stylesheet" href="style.css">
</HEAD>
<body>
   <form id="Form1" method="post" runat="server">
     <div id="news_root" style="LEFT:20px; TOP:20px" class="root">
      <div id="news_handle" class="handle">
       <div align="center">按住左鍵定制窗口</div> </div>
       <div id="news" class="text">
<p align="center"><a href="http://www.100jq.com" target="_blank">百家拳軟件項目研究室</a></p>
          <p align="left"> 拖拽功能</p>
</div> </div></form>
<script language="javascript">
// 初始化新聞面板的拖拽效果
var news_handle = document.getElementById("news_handle");
var news_root = document.getElementById("news_root"); Drag.init(news_handle, news_root);
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
</script>
</body>
</HTML>
當觸發了某一個事件之後,會通過表單提交出去。通過拖拽,javascript獲得了對象的坐標的位置。再將這個坐標位置保存就可以了。在drag.js裡面定義了5個函數。
init 初始化坐標的位置
start 開始鼠標拖拽的坐標處理
drag 拖拽過程的處理
end 拖拽結束的處理
fixE特殊位置的填充
整個例子下載 點此處下載

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved