大家都有自己的博客吧，现在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特殊位置的填充
整个例子
下载 点此处下载
2007-8-27 
