js拖拽效果的原理及实现

js拖拽效果

拖拽即点击某个div的时候鼠标按住不放，移动鼠标，div也会跟着移动，只要获取鼠标相对当前div的距离，鼠标移动到新的位置，div也移动新的位置，相对距离不变，这样就实现了拖拽效果了，代码如下。

var node1 = document.getElementById("div1");//获取节点
drag(node1);//调用方法
function drag(node){
    //1、添加mousedown，记录相对距离
    node.onmousedown = function(ev){
        var e = ev || window.event;//兼容事件对象
        var offsetX = e.clientX - node.offsetLeft;//鼠标点击相对当前div的距离
        var offsetY = e.clientY - node.offsetTop;

        //2、mousemove，保持相对距离跟随鼠标移动
        document.onmousemove = function(ev){
            var e = ev || window.event;

            node.style.left = e.clientX - offsetX + 'px';//鼠标位置减去相对距离即为新的位置
            node.style.top = e.clientY - offsetY + 'px';
        }
    }

    //3、取消拖拽
    document.onmouseup = function(){
        document.onmousemove = null;//取消移动事件
    }
}