大家都有自己的博客吧，現在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特殊位置的填充
整個例子下載
點此處下載