这段代码展示了如何使用JavaScript创建一个DOM元素的拖放功能。通过Drag.init方法初始化拖拽行为，设置拖动范围限制，并处理拖动过程中的鼠标移动和释放事件，实现了元素在页面上的自由拖动。
可拖放DOM模式（Draggable DOM pattern）可以让用户在Web页面中对各个部分进行编辑，即只需要选中要移动的部分，将其拖拽到新的位置上，就可以重新安排整个页面的布局效果，下面介绍一下具体的实现方式。
在Eclipse中新建一个项目，项目的名称为“P45_DropDrag”。首先，新建一个HTML文档，页面名称为“main.html”。 该页面实现的效果如图4-6所示。当用户使用鼠标选中对应的方框时，就可以通过拖拽调整其在页面中的位置。
图
4-6
拖拽效果
本例中所使用的HTML文档的源代码如下所示。注意在本页面中调用了一个开源框架中有关定位的JavaScript脚本文件，读者可以参考本书配套光盘中的源代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>Main</title>
<script language="javascript" src="dom-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="
最低0.47元/天 解锁文章
扫一扫
115
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
