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

核心提示： 仔细分析无法选择可拖动实体中内容的原因，就会发现如果要选择页面中的某一部分内容，掌握 Dojo 工具包，第 4 部分: Dojo 中的拖拽(3)，其动作步骤为，按住鼠标左键不放，清单 3<divid="bad"dojoType="dojo.dnd.Moveab

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

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

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

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

清单 3

　<div　id="bad"　dojoType="dojo.dnd.Moveable"　handle="dragme">　
　<!---　声明　id　为　"dragme"　的实体为拖动柄　->　
　<div　id="dragme">You　can　drag　it　by　me</div>　
　<!　—上面是拖动柄的实体　-->　
　You　can　cop　me　"Haha,　I　am　a　bad　guy."　
　</div>

如果要动态声明上面的“拖动柄”，则需要在页面加载完成以后通过执行 dojo.dnd.Moveable("bad", {handle: "dragme"}) 来实现。 handle 后面所跟的值为将成为可拖动实体“bad”拖动柄的实体 id 。