js拖拽效果的原理和实现

Posted zcx980320

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js拖拽效果的原理和实现相关的知识,希望对你有一定的参考价值。

让我们了解一下最简单的拖拽效果:

1.首先我们先设置一个div,然后简单设置一下样式:

   div{
            width:50px;
            height: 50px;
            background-color: red;
            position: absolute;
        }
2.然后我们编写js部分,我们要清楚,元素的拖拽分三个部分:鼠标左键按下、拖动鼠标元素跟着移动、以及鼠标左键抬起停止拖拽元素停止移动
 
   var div = document.querySelector("div");                            //这里我们需要知道:1>按下时开始监听在文档中鼠标移动的事件
                                                                                                                                  2>开始监听鼠标松开键的事件
                                                                                                                                  3>只有按下时才准备拖拽
                                                                                                                                  4>当鼠标在文档移动时,不能再div上移动,因为鼠标可能离开div,造成无法拖拽
   div.onmousedown = function (e1) {                                       //这里对鼠标按下事件执行事件,分别对鼠标移动和鼠标抬起情况下进行设置
            document.onmousemove = function (e) {                    //当鼠标移动时,将当前鼠标相对视口的坐标赋值给元素的left和top
     div.style.left = e.clientX - e1.offsetX + "px";           //因为我们需要在按下的位置拖拽,因此我们还需要获取按下键鼠标相对div的左上角位置,使用当前鼠标位置减去这个相对元素的左上角位置,保证鼠标所按位置拖拽
                  div.style.top = e.clientY - e1.offsetY + "px";         
            }
            document.onmouseup = function () {                          //当释放鼠标键时,删除鼠标移动事件和删除鼠标释放事件
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
最后我们再执行页面,元素就能够跟着拖动了
 

以上是关于js拖拽效果的原理和实现的主要内容,如果未能解决你的问题,请参考以下文章

js拖拽效果的原理和实现

js拖拽效果的原理及实现

js实现拖拽效果

js实现鼠标的拖拽效果

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

原生拖拽太拉跨了,纯JS自己手写一个拖拽效果,纵享丝滑