作者在 2008-05-28 10:35:22 发布以下内容
不得不说Dojo的DnD做得很出色，非常简便！能够用较少的代码就做出一个Dnd应用。先给出一个简单的例子：
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><
html><
head><
meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><
title>DnD Test</title><
style type="text/css"> @import "dojo/dijit/themes/soria/soria.css"; @import "dojo/dojo/resources/dojo.css"</
style><
script type="text/javascript" src="dojo/dojo/dojo.js" djConfig="parseOnLoad:true"></
script><
script type="text/javascript">dojo.require(
"dojo.parser");dojo.require(
"dijit.form.Button");dojo.require(
"dojo.dnd.Source");</
script></
head><
body class="soria"><
h1>My own DnD Test</h1><br/><
div dojoType="dojo.dnd.Source" style="border:1px dotted red; ; height:200px"> <b>Drag the following elements to the Target area:</b> <div class="dojoDndItem" dndType="my1"> <input type="button" dojoType="dijit.form.Button" value="Drag"> </div> <div class="dojoDndItem" dndType="my2"> <input type="text"> </div> <div class="dojoDndItem" dndType="my3"> <input type="button" value="Lost"> </div></
div><
div dojoType="dojo.dnd.Target" style="border:2px dotted skyblue; ; height:200px" accept="my1, my2"> <b>Target area:</b></
div></
body></
html> 首先要dojo.require("dojo.dnd.Source")。能够拖动的元素可以称作Source，而能够接受这些元素的地方就叫做Target。因此，我们只要把需要拖动的元素放在Source里面，拖到Target里面就可以了。所以，可以通过div来建立Source和Target区域。当然，用style来区分一下。然后，要被拖动的元素放在class="dojoDndItem"中，自己设置一个dndType。然后我们在Target区域中设置一个accept属性，里面放你要接受的元素的dndType。这里，我只设置接受了my1, my2。所以，只有dndType是my1和my2的元素能够拖动并释放到Target区域，而my3元素只能拖动，不能释放到Target区域。
当然，这个例子只是简单的演示了一下Dnd，还没有加入任何事件代码。有兴趣的可以自己继续研究下去。
