js单个元素拖拽效果的原理及实现

原理

拖拽的过程分为三步：1.选中状态（认为是鼠标按下）2.拖拽阶段3.松开状态（拖拽结束）

鼠标事件

        click        点击
        dblclick     双击
        mousedown    按下
        mouseup      松开
        mousemove    移动
        mouseover    滑入
        mouseout     滑出
        mouseenter   进入
        mouseleave   离开
        contextmenu  右键菜单

通过监听函数addEventListener将鼠标状态转化为相应的执行事件，产生相应的页面效果

选中状态

本文设置当鼠标点击时触发,选中状态需要获取当前鼠标的位置

鼠标点击左键是执行clickHandler

             document.addEventListener("click",clickHandler);

获取鼠标所在位置

             createRect(e.clientX,e.clientY);

拖拽阶段

首先需要给元素设置定位属性，而后在鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top即可实现元素跟随鼠标移动。因为我们需要在按下的位置拖拽，因此我们还需要获取按下键时鼠标相对div的左上角位置（即元素的初始位置）使用当前鼠标位置减去这个相对元素的左上角位置即可

document.onmousemove=function(e){
                div.style.left=e.clientX-e1.offsetX+"px";
                div.style.top=e.clientY-e1.offsetY+"px";
            }

松开状态

当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件，此时元素便不会跟跟随鼠标的位置移动。

 
            document.onmouseup=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }