js拖拽效果javascript实现将元素拖拽如某容器效果demo

拖拽效果demo以及文档说明

Demo效果

View Code

将以下小方格拖入上面的容器内&＃xff1a;

注&＃xff1a; id&＃61;"dragItems"下面的子元素设置 drag&＃61;"true"属性的才可以拖动

111222333444555666777888999

Javascript 拖放效果相关技术说明

【触发对象】

触发对象是用来触发拖放程序的&＃xff0c;程序中通过Handle属性设置。有的时候不需要整个拖放对象都用来触发&＃xff0c;这时就需要触发对象了。
使用了触发对象后&＃xff0c;进行移动的还是拖放对象&＃xff0c;只是用触发对象来触发拖放&＃xff08;一般的使用是把触发对象放到拖放对象里面&＃xff09;。
ps&＃xff1a;触发对象的另一个用法是通过设置相同的Handle&＃xff0c;实现一个触发对象同时拖放多个拖放对象。

【范围限制】

要设置范围限制必须先把Limit设为true。范围限制分两种&＃xff0c;分别是固定范围和容器范围限制&＃xff0c;主要在Move程序中设置。
原理是当比较的值超过范围时&＃xff0c;修正left和top要设置的值使拖放对象能保持在设置的范围内。

【取消默认动作】

对选择状态的文本内容、连接和图片等进行拖放操作会触发系统的默认动作&＃xff0c;例如ie中拖动图片鼠标会变成禁止操作状态&＃xff0c;这样会导致这个拖放程序执行失败。

不过ie在设置了setCapture之后&＃xff0c;通过用户界面用鼠标进行拖放操作和内容选择都会被禁止。
意思就是setCapture之后就不能对文档内容进行拖放和选择&＃xff0c;注意这里的拖放是指系统的默认动作&＃xff0c;例如ondragstart就不会被触发。
不过如果setCapture的参数是false的话&＃xff0c;容器内的对象还是可以触发事件的&＃xff08;具体看鼠标捕获部分&＃xff09;&＃xff0c;所以setCapture的参数要设成true或保留默认值。

而ff的鼠标捕获没有这个功能&＃xff0c;但可以用preventDefault来取消事件的默认动作来解决&＃xff1a;

oEvent.preventDefault();

ps&＃xff1a;据说使用preventDefault会出现mouseup丢失的情况&＃xff0c;但我在ff3中测试没有发现&＃xff0c;如果各位发现任何mouseup丢失的情况&＃xff0c;务必告诉我啊。

【清除选择】

ie在设置setCapture之后内容选择都会被禁止&＃xff0c;但也因此不会清除在设置之前就已经选择的内容&＃xff0c;而且设置之后也能通过其他方式选择内容&＃xff0c;
例如用ctrl&＃43;a来选择内容。
ps&＃xff1a;onkeydown、onkeyup和onkeypress事件不会受到鼠标捕获影响。
而ff在mousedown时就能清除原来选择的内容&＃xff0c;但拖动鼠标&＃xff0c;ctrl&＃43;a时还是会继续选择内容。
不过在取消了系统默认动作之后&＃xff0c;这样的选择并不会对拖放操作造成影响&＃xff0c;这里设置主要还是为了更好的体验。

以前我用禁止拖放对象被选择的方法来达到目的&＃xff0c;即ie中设置拖放对象的onselectstart返回false&＃xff0c;在ff中设置样式MozUserSelect(css:-moz-user-select)为none。
但这种方法只能禁止拖放对象本身被选择&＃xff0c;后来找到个更好的方法清除选择&＃xff0c;不但不影响拖放对象的选择效果&＃xff0c;还能对整个文档进行清除&＃xff1a;
ie:document.selection.empty()
ff:window.getSelection().removeAllRanges()
为了防止在拖放过程中选择内容&＃xff0c;所以把它放到Move程序中&＃xff0c;下面是兼容的写法&＃xff1a;

window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

这里说说ff下有一个比较奇怪的现象&＃xff0c;在SimpleDrag中第一次拖放没有问题&＃xff0c;但第二次拖放时鼠标就会显示禁止操作的样式&＃xff08;拖动失败&＃xff09;。
我发现如果在Start程序中阻止默认动作&＃xff08;preventDefault&＃xff09;或清除选择&＃xff08;window.getSelection().removeAllRanges()&＃xff09;就能正常了。
所以我估计是在点击事件后&＃xff0c;拖放对象已经默认设置成选择状态了&＃xff08;虽然看起来不是&＃xff09;&＃xff0c;再拖动时就触发了系统的默认拖动事件。
为了支持推断&＃xff0c;我在html插入一段文本&＃xff0c;然后在每一次拖放之后选择一下那段文本&＃xff08;间接取消拖放对象的选择&＃xff09;&＃xff0c;那就能正常了。
不过暂时还没找到官方说明&＃xff0c;所以还不能下结论。