掌握Dojo工具包，第4部分:Dojo中的拖拽

掌握Dojo工具包，第4部分:Dojo中的拖拽2010-07-04 IBM 蒋贤礼牟磊谢福生Dojo 支持的两种拖拽方式

在开始尝试了解实现 Dojo 拖拽效果的使用方法以前，首先必须明确拖拽具有两种截然不同的表现效果。

第一种表现效果是图标被拖拽到哪里，其就会被直接放到哪里，这个拖拽效果是图标完全紧跟拖拽的动作，与每一个拖拽动作的运动轨迹完全契合，这种效果被称为 “拖动”。第二种表现效果是当图标被拖拽到一个地方，松开鼠标的时候，图标会以当前位置为基础而以其它图标为参照系进行位置的自动调整。这种效果被称为 “拖放”。

Dojo 的拖动

“拖动”与“拖放”相比较，原理更加容易理解，使用更加简单。而且更加贴近于人们直观印象中的“拖拽”效果。

最简单的拖动实例

要在 Dojo 的支持下，实现拖动的效果所需要的只是使用 Dojo 所提供的 Dojo 标签属性标注出希望实现拖动效果的实体。简单的说，就是如果希望一个实体可以拖动，则只需要在这个实体的标签里面加上 dojoType=“dojo.dnd.Moveable”这个属性。例如要实现一个表格的拖动，则只需要在这个表格的声明标签“<table& gt;”里加上 dojoType=“dojo.dnd.Moveable”这个属性。甚至就是在“<tr>”或“<td>”标签中加上 dojoType=“dojo.dnd.Moveable”，也可以实现对应实体的拖动效果。

清单 1

<script type="text/javascript">
dojo.require（"dojo.dnd.move"）; //引入Dojo的拖动功能模块 
dojo.require（"dojo.parser"）; //引入解析Dojo标记的功能模块 
</script>

<table dojoType="dojo.dnd.Moveable">
<tbody><tr><td>Haha, I am a good guy.</td></tr></tbody>
</table>
<！--引入dojoType="dojo.dnd.Moveable"，让上面的表格可以拖动-->

需要注意的是静态创建可拖动实体需要引入 dojo.require（"dojo.parser"）。

动态实现可拖动实体

在清单 1 中，通过在一些实体的标签里面加上相应的 Dojo 标签属性来实现可拖动实体的创建。这种静态实现可拖动实体的方法简单明了。但是在更多的情况下，往往需要根据一些实际情况运行得到的数据来动态的创建可拖动实体。在这种情况下，静态实现可拖动实体的方法就不能满足当下的需求。值得庆幸的是 Dojo 对于所有静态实现的方法都基本对应有一套相应的动态实现方法。

清单 2

<script type="text/javascript" src="dojo_path/dojo/dnd/move.js"></script>
 <script type="text/javascript">
 dojo.require（"dojo.dnd.move"）;
 var m1;
 var init = function（）{
 m1 = new dojo.dnd.Moveable（"bad",{}）;//申明 id 为 "bad" 的实体为可拖动实体 
 };
 dojo.addOnLoad（init）;// 表示在页面加载完成以后，执行 init 函数 
 </script>

 <div id="bad">
 You can cop me "Haha, I am a bad guy."
 </div>

需要注意的是 dojo.dnd.Moveable（"bad",{}）中的大括号用来设置可拖动实体“bad”的一些与拖动相关的属性，目前可以暂时设为空，则不设置任何与拖动相关的属性。在后面的讲述中，一些相关的重要属性将被逐步介绍。