Dojo在dojo.dnd包中提供了对页面元素拖拽效果的支持，其中用于实现拖拽效果的关键类如下。
<1> dojo.dnd.HtmlDragSource
<2> dojo.dnd.HtmlDragMoveSource
<3> dojo.dnd.HtmlDropTarget
<4> dojo.dnd.HtmlDragCopySource
接下来，看看这四个类的使用方法。
首先，定义两个div和一个列表：
<div id="drag1" style="width:200px;height:200px;background:bule">
拖动模块1
</div>
<br/>
<div id="drag2" style="width:400px;height:400px;background:yellow">
拖动模块2
</div>
<ul id="list1">
<li>
列表1，条目1
</li>
<li>
列表1，条目2
</li>
<li>
列表1，条目3
</li>
</ul>
<ul id="list2">
<li>
列表2，条目1
</li>
<li>
列表2，条目2
</li>
<li>
列表2，条目3
</li>
</ul>
定义css：
<style type="text/css">
ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
li {
margin: 3px 0;
padding: 3px 3em 3px 10px;
border: 2px solid #456;
background-color: #cde;
cursor: move;
}
</style>
实例一：简单拖拽效果
功能：拖拽标签drag1，鼠标松开时，该标签又回到原位置
关键类：dojo.dnd.HtmlDragSource: 实现页面元素的拖拽效果
主要代码：
<script type="text/javascript">
dojo.require("dojo.dnd.*");
dojo.require("dojo.event.*");
function init(){
var drag_comeback= dojo.byId("drag1");
new dojo.dnd.HtmlDragSource(drag_comeback, "drag1");
}
dojo.event.connect(dojo, "loaded", "init");
</script>
实例二：拖拽移动对象
功能：拖拽标签drag2，鼠标松开时，该标签将停留在鼠标松开的位置
关键类： dojo.dnd.HtmlDragMoveSource: 实现页面元素的自由拖放效果
主要代码：
<script type="text/javascript">
dojo.require("dojo.dnd.HtmlDragMove");
dojo.require("dojo.dnd.*");
dojo.require("dojo.event.*");
function init(){
new dojo.dnd.HtmlDragMoveSource(dojo.byId("drag2"));
}
dojo.event.connect(dojo, "loaded", "init");
</script>
实例三：接受拖拽对象
功能：页面中包含两个列表对象list1和list2，通过新建dojo.dnd.HtmlDropTarget类的对象实例，list1和list2都具有接受被拖拽元素的能力，可以拖放到list1和list2任何一个列表中。
关键类：dojo.dnd.HtmlDropTarget: 使页面元素成为被拖拽元素的目标对象
主要代码：
<script type="text/javascript">
dojo.require("dojo.dnd.*");
dojo.require("dojo.event.*");
function init(){
//使列表对象list1能够接受被拖拽元素，被拖拽元素的类型是"li1"
var list1 = document.getElementById("list1");
new dojo.dnd.HtmlDropTarget(list1, ["li1"]);
//使list1中的每一个列表项元素能够被拖拽，其类型是“li1”
var lis = list1.getElementsByTagName("li");
for (var x = 0; x < lis.length; x++) {
new dojo.dnd.HtmlDragSource(lis[x], "li1");
}
//使列表对象list2能够接受被拖拽元素，被拖拽元素的类型是"li1"
var list2 = document.getElementById("list2");
new dojo.dnd.HtmlDropTarget(list2, ["li1"]);
//使list2中的每一个列表项元素能够被拖拽，其类型是“li1”
var lis = list2.getElementsByTagName("li");
for (var x = 0; x < lis.length; x++) {
new dojo.dnd.HtmlDragSource(lis[x], "li1");
}
}
dojo.event.connect(dojo, "loaded", "init");
</script>
实例四：复制拖拽效果
功能：拖拽目标对象中新增一个被拖拽元素的拷贝。如，两个列表中的列表项均可以在两个列表中进行拖拽，当拖拽动作完成之后，被拖拽的列表项仍然保持不变，而目前位置会新增一份被拖拽列表项的拷贝。
关键类：dojo.dnd.HtmlDragCopySource: 实现页面元素的复制拖拽效果
主要代码：
<script type="text/javascript">
dojo.require("dojo.dnd.*");
dojo.require("dojo.dnd.HtmlDragCopy");
dojo.require("dojo.event.*");
function init(){
//使列表对象list1能够接受被拖拽元素，被拖拽元素的类型是"li1"
var list1 = document.getElementById("list1");
new dojo.dnd.HtmlDropTarget(list1, ["li1"]);
//使list1中的每一个列表项元素能够被拖拽，其类型是“li1” ；同时具有复制拖拽的功能
var lis = list1.getElementsByTagName("li");
for (var x = 0; x < lis.length; x++) {
new dojo.dnd.HtmlDragCopySource(lis[x], "li1", false);
}
//使列表对象list2能够接受被拖拽元素，被拖拽元素的类型是"li1"
var list2 = document.getElementById("list2");
new dojo.dnd.HtmlDropTarget(list2, ["li1"]);
//使list2中的每一个列表项元素能够被拖拽，其类型是“li1” ；同时具有复制拖拽的功能
var lis = list2.getElementsByTagName("li");
for (var x = 0; x < lis.length; x++) {
new dojo.dnd.HtmlDragCopySource(lis[x], "li1", false);
}
}
dojo.event.connect(dojo, "loaded", "init");
</script>
