偶然间看到了以前做的一个简洁的div拖拽效果,修改了一下加点注释,经测试完美通过firefox/chrome/ie6-11,现拿来分享一下。
先说一下实现原理及要点,最主要的有三步。第一步是mousedown事件,鼠标mousedown的时候记录此时的鼠标X轴和Y轴以及拖拽框的left和top,并且给拖拽标记赋值true,代表拖拽动作就绪。第二步是mousemove事件,此时动态获取鼠标的X轴和Y轴,然后计算出来拖拽框新的left和top并赋值使其实现拖拽效果。第三步是mouseup事件,鼠标弹起时给拖拽标记赋值false,拖拽动作完成。
html代码如下:
js代码如下:
最后要说明一下,在开始拖拽动作之前,要禁止选中内容,否则影响拖拽效果。firefox和chrome可以通过css来设置:{-moz-user-select: none; -webkit-user-select: none;},ie本来也可以直接在html里写一个onselectstart="return false",但似乎chrome受了点影响,所以决定取消这个写法,然后在js里为ie浏览器写一个onselectstart事件。
这个小插件只是简单实现拖拽效果,但兼容性很好,里面也用到了一些知识点和技巧。当然也可以借助这个插件或里面的思想继续扩展,写一个比较完善的拖拽插件(如:Draggable和Droppable)。
以上所述就是本文的全部内容了,希望大家能够喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。