js拖拽效果的原理及多种实现方法

<script>
        // 第一种方法实现
        var div = document.querySelector("div");
        // 给元素身上加上鼠标按下的事件，并将鼠标事件e参数传递进去
        div.onmousedown = function(e){
            // 这里要注意的是，给文档对象身上加鼠标移动事件
            // 因为如果给div元素身上加的话,当鼠标离开div元素的时候,将不会再进行拖拽效果
            // 那么如果给document对象加,点击元素拖动离开div也不会造成无法拖拽的现象
            document.onmousemove = function(e1){
                // 这里通过e和e1分别接受被点击目标对象的鼠标事件
                // 通过document对象获取鼠标的clientX和clientY相对于可视区窗口的距离
                // 再获取offsetX和offsetY获取div元素相对于自身的坐标位置
                // 两者相减就是鼠标被点击瞬间距离可视区窗口左上角的坐标位置
                div.style.left = e1.clientX - e.offsetX + "px";
                div.style.top = e1.clientY - e.offsetY + "px";
            }
            document.onmouseup = function(){
                // 最后当移动完成之后,鼠标按键抬起的瞬间要清除移动和抬起事件
                // 否则移动事件将继续下去
                document.onmouseup = null;
                document.onmousemove = null;
            }
        }
    </script>

<script>
        // 第二种方法实现(通过事件侦听实现)
        var offsetX,offsetY,div;
        // 初始化函数
        init();
        function init(){
            div = document.querySelector("div");
            // 给div元素身上加上鼠标按下的侦听事件
            div.addEventListener("mousedown",mouseHandler);
        }

        function mouseHandler(e){
            // 这里接受e鼠标事件，通过e.type获取鼠标事件类型
            if(e.type === "mousedown"){
                // 阻止文字被选中的默认事件
                e.preventDefault();
                // 这里分别设置offsetX和offsetY全局变量，为的是接受div事件
                // 身上绑定的鼠标坐标
                offsetX = e.offsetX;
                offsetY = e.offsetY;
                // 分别给document对象身上加入不同事件，邦洞同一个函数
                document.addEventListener("mousemove",mouseHandler);
                document.addEventListener("mouseup",mouseHandler);
            }else if(e.type === "mousemove"){
                // 如果事件为鼠标移动，则获取鼠标点击下去的坐标
                // 这里需要注意的是，因为事件不同，所以e的指向也就发生了变化
                // 这里的e指向为doucument，并不是div元素，所以这也就是为什么在鼠标
                // 事件为mousedown的时候获取offsetX和offsetY的值
                div.style.left = e.clientX - offsetX + "px";
                div.style.top = e.clientY - offsetY + "px";
            }else if(e.type === "mouseup"){
                // 同样的，当鼠标事件为抬起的时候，分别清除移动和抬起的事件
                document.removeEventListener("mousemove", mouseHandler);
                document.removeEventListener("mouseup",mouseHandler);
            }
        }

    </script>

标签：鼠标,offsetX,offsetY,js,事件,原理,div,document,拖拽
来源： https://www.cnblogs.com/Kuoblog/p/12639691.html