JS拖拽元素原理及实现代码
来源:互联网 发布:执业药师考试题库软件 编辑:程序博客网 时间:2024/05/16 10:29
拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友!
一、拖拽的流程动作
①鼠标按下
②鼠标移动
③鼠标松开
二、拖拽流程中对应的JS事件
①鼠标按下会触发onmousedown事件
obj.onmousedown = function(e) { //..........}②鼠标移动会触发onmousemove事件
obj.onmousemove = function(e) { //......}③鼠标松开会触发onmouseup事件
obj.onmouseup = function() { //......}
三、实现的原理讲解
拖拽其实是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。
当鼠标按下或鼠标移动时,都可以获取到当前鼠标的位置,即移动前的位置与移动中的位置。
那么上面①与②的代码就应该变成这样
var mouseDownX,mouseDownY // 因在移动中需计算鼠标的偏移需要用到鼠标按下时的坐标,固声明称全局变量obj.onmousedown = function(e) { mouseDownX = e.pageX; mouseDownY = e.pageY;}obj.onmousemove = function(e) { var mouseMoveX = e.pageX,mouseMoveY = e.pageY;}移动前与移动后坐标有了,那么计算偏移,先看下图
很明显移动后元素的X坐标为 鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标
Y坐标为 鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标
把新的 X,Y 替换元素的 X,Y 就搞定了。
那么代码就应该更换为:
var mouseDownX,mouseDownY,initX,initY,flag = false;obj.onmousedown = function(e) { //鼠标按下时的鼠标所在的X,Y坐标 mouseDownX = e.pageX; mouseDownY = e.pageY; //初始位置的X,Y 坐标 initX = obj.offsetLeft; initY = obj.offsetTop; //表示鼠标已按下 flag = true;}obj.onmousemove = function(e) { // 确保鼠标已按下 if(flag) { var mouseMoveX = e.pageX,mouseMoveY = e.pageY; this.style.left = parseInt(mouseMoveX) - parseInt(mouseDownX) + parseInt(initX) + "px"; this.style.top = parseInt(mouseMoveY) - parseInt(mouseDownY) + parseInt(initY) + "px"; } }obj.onmouseup = function() { //标识已松开鼠标 flag = false;}需要注意的事,如果用jquery库来写的话三个事件为mousedown、mousemove、mouseup,名称稍微有点差别。
还有一点,被拖拽的元素的样式要设置成绝对或相对位置才有效果。
至此,最简单的元素拖拽功能就讲完了~~~~
如有不正确之处欢迎大家指正!
3 0
- JS拖拽元素原理及实现代码
- JS拖拽元素实现
- 鼠标拖拽效果原理及完整代码实现
- 集合框架_TreeSet保证元素唯一性和比较器排序的原理及代码实现
- JS倒计时原理及实现
- BatchNormalization 原理及代码实现
- Drag,js实现鼠标拖拽元素
- js面向对象实现元素拖拽
- js实现键盘操作实现div的移动或改变的原理及代码
- Vue通过操作Dom元素 实现 拖拽文件到网页进行文件上传【JS/JQ 原理也是一样的】
- JS放大镜实现原理和代码
- JS快速排序法原理及实现
- js实现轮播图原理及示例
- MD5原理及c#代码实现
- MD5原理及c#代码实现
- IntentService实现原理及内部代码
- AOP 概念 原理及代码实现
- IntentService实现原理及内部代码
- hdu ACM组队安排
- opencv关于cvNormalize归一化的用法
- Codeforces Round #334 (Div. 2) B. More Cowbell
- iOS 版本更新提示
- SQL语句 - 使用order by优先级排序
- JS拖拽元素原理及实现代码
- WEB服务器、应用程序服务器、HTTP服务器区别
- vSphere Management Assistant(VMA) root账户重置密码
- iOS 在textView中添加图片
- [投稿]Speex回声消除代码分析
- linux dmesg命令参数及用法详解(linux显示开机信息命令)
- MyBatis 都是分号惹的祸(ORA-00911: invalid character)
- gcc编译器安装
- exp/imp 空表少表问题