拖拽，是目前较为常见的 Ajax 技术。当前以 Ajax 技术构建的电子商务网站往往都采用拖放商品到购物车这种直观的方式代替以往繁复的操作来实现客户对商品的选购。 掌握 Dojo 系列 的这一篇文章将以作者亲身的开发经历为基础，详细讲述如何使用 Dojo 所提供的功能模块开发出各种各样的拖动和拖放效果。此外，还详细叙述如何对 Dojo 的拖拽功能进行修改和配置，以及对拖拽的实现原理进行了解释。

Dojo 支持的两种拖拽方式

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

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

Dojo 的拖动

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

最简单的拖动实例

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

				
<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 对于所有静态实现的方法都基本对应有一套相应的动态实现方法。

				
 <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”的一些与拖动相关的属性，目前可以暂时设为空，则不设置任何与拖动相关的属性。在后面的讲述中，一些相关的重要属性将被逐步介绍。

拖动柄

如果运行清单 1 和清单 2 中的代码，然后尝试在其页面中使用鼠标去选择可拖动实体中的内容。就会发现，无论使用何种方法都无法选择可拖动实体中的内容，当然就更谈不上复制可拖动实体中的内容了。

仔细分析无法选择可拖动实体中内容的原因，就会发现如果要选择页面中的某一部分内容，其动作步骤为，按住鼠标左键不放，然后拖动鼠标选择一块区域作为确定选择的内容；而如果要拖动一个可拖动实体，其动作步骤也为，按住鼠标左键，然后拖动鼠标引起可拖动实体的移动。

因此如果让某个实体具有了可拖动的功能，则当对这个实体点下鼠标左键，并拖动鼠标时，就浏览器看来，其将不能理解这个动作的目的是要拖动该实体还是选择该实体里面的内容。因为这两个具有不同含义的动作就其动作本身来说是一模一样的，浏览器没有办法对这两个动作进行区分。

但现实的情况往往需要一个实体既可以被拖动，又可以被选择其内部所包含的内容。 Dojo 通过给可拖动实体增加一个拖动柄，实现了选择内容动作和拖动实体动作的区分。

声明拖动柄的方法为在声明可拖动实体的时候，在可拖动实体的标签中再加上一个除 dojoType 之外的另外一个 Dojo 标签属性 handle= “”，handle 后面的双引号中需要填入的是作为拖动柄部分的那个实体的 id 值。

本文转自IBM Developerworks中国

请点击此处查看全文