美文网首页
JS拖拽元素原理及实现代码

JS拖拽元素原理及实现代码

作者: kismetajun | 来源:发表于2018-07-07 14:52 被阅读103次

拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友!

一、拖拽的流程动作

①鼠标按下

②鼠标移动

③鼠标松开

拖拽原理

1.鼠标按下+鼠标移动  =  拖拽      事件  onmousedown +  onmousemove  

2.鼠标松开  =  无拖拽                  停止拖拽  onmouseup

3.鼠标偏移  =   拖拽距离 

二、拖拽流程中对应的JS事件

①鼠标按下会触发onmousedown事件

②鼠标移动会触发onmousemove事件

③鼠标松开会触发onmouseup事件

三、实现的原理讲解

拖拽其实是通过获取鼠标移动的距离来实现的,即计算移动前的位置的坐标(x,y)与移动中的位置的坐标(x,y)差值。

当鼠标按下或鼠标移动时,都可以获取到当前鼠标的位置,即移动前的位置与移动中的位置。

那么上面①与②的代码就应该变成这样

移动前与移动后坐标有了,那么计算偏移,先看下图

很明显移动后元素的X坐标为  鼠标移动后的X坐标 - 鼠标按下的X坐标 + 元素的初始X坐标

Y坐标为  鼠标移动后的Y坐标 - 鼠标按下的Y坐标 + 元素的初始Y坐标

把新的 X,Y 替换元素的 X,Y 就搞定了。

那么代码就应该更换为:

需要注意的事,如果用jquery库来写的话三个事件为mousedown、mousemove、mouseup,名称稍微有点差别。

注意:(1)被拖拽的元素的样式要设置成绝对或相对位置才有效果。

           (2)拖拽加到document,不然内容会脱离

相关文章

  • JS拖拽元素原理及实现代码

    拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的。下面讲解一下拖拽的...

  • js拖拽html元素工具类

    复制就能用的拖拽js方法 原生js实现拖拽元素方法 使用(注意拖拽目标元素需绝对定位 position: 'abs...

  • js实现元素拖拽

    被移动元素必须为绝对定位 Dom Javasrtipt

  • Java 实现冒泡排序

    本文介绍冒泡排序原理及 Java 语言实现。 目录 冒泡排序原理 代码实现 冒泡排序原理 比较相邻的元素,升序时如...

  • HTML5拖拽drag

    通过拖拽实现页面元素的位置改变 实现拖拽效果 源元素 - 要拖拽的文件 目标元素 - 要拖拽到哪里去 目前实现拖拽...

  • js实现拖拽

    js实现拖拽 实现方式 mousedown、mousemove和mouseup 拖着目标元素在页面任意位置如果要设...

  • 类百度图片的固定高度横向瀑布流js方法及纯css实现的方法记录

    纯css实现代码: js实现代码及思路: 原理是木桶原理,把图片放进一个div计算当前排的宽度,如果大于的话,把最...

  • 使用鼠标事件实现拖拽划动(React)

    我使用了 onMouseDown onMouseMove 和 onMouseUp 来实现了拖拽划动。 代码 原理 ...

  • 拖拽元素JS实现方法

    思路: onmousedown :鼠标按下的时候,记录鼠标所在的位置pageX,pageY记录鼠标相对于盒子的位置...

  • jQuery 实现拖拽

    前一段时间写过一个js原生方法实现拖拽,现在用jQuery再来实现以下。其实,原理都是一样的。下面,我们来看代码。

网友评论

      本文标题:JS拖拽元素原理及实现代码

      本文链接:https://www.haomeiwen.com/subject/jubwuftx.html