位置: 编程技术 - 正文
javascript实现拖放效果(js拖拽div)
编辑：rootadmin推荐整理分享javascript实现拖放效果(js拖拽div)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js拖拽排序实现思路,js实现拖拽元素改编顺序,js拖拽生成页面,js拖拽排序实现思路,js如何实现拖拽,js拖拽会用到哪些事件,js拖拽会用到哪些事件,js拖拽div,内容如对您有帮助，希望把文章链接给更多的朋友！
本文实例为大家分享的是一个拖放的效果，参考的代码，重构以下，加以理解学习。
首先来看效果：
拖动div
拖放状态：未开始
【程序说明】
拖动原理：其实就是在拖动块上监听mousedown事件，鼠标点击时，通过事件对象获取对应的坐标参数。然后鼠标移动时再监听document上的mousemove事件，获取鼠标的clientX 和clientY坐标然后设置拖动块的left 和 top。
首先是监听mousedown事件
然后在Start上添加mousemove 和 mouseup 事件
鼠标移动时，设置拖动块的left 和 top 属性 ：
水平和垂直锁定：通过判断LockX 和lockY属性来限制对于的top 和 left 属性即可。
范围限制锁定：通过计算容器的宽高和拖动块的宽高差值来设定最大left值和top值，来限制拖动块的left值和top值会在一定的范围里。
完整DEMO：
标签: js拖拽div
本文链接地址:https://www.jiuchutong.com/biancheng/387141.html 转载请保留说明！上一篇：js判断手机访问或者PC的几个例子(常用于手机跳转)(js判断手机访问还是电脑访问)
下一篇：详解JavaScript基于面向对象之继承实例(javascript基础)
