jQuery版拖动模块

<script>
    // 面向对象方式
    function drag(x, y) {
        // 定义变量记录div的在文档中的位置
        let divTop = 0;
        let divLeft = 0;

        // 鼠标在div中按下后获取距离
        x.on("mousedown", function () {
            // console.log(event.clientX, event.clientY);
            // 鼠标的文档位置减去div的位置得到的就是鼠标在div中位置
            // 一定要注意减去的距离，若是想要使鼠标一直保持在div中间，那减去的就是div的长宽高的一半
            delX = window.event.clientX - $(this).offset().left;
            // console.log(delX);
            delY = window.event.clientY - $(this).offset().top;
            // console.log(delY);

            $(document).on("mousemove", function () {
                // console.log(event.clientX, event.clientY);

                // 获取鼠标位置
                x.offset({
                    top: window.event.clientY - delY,
                    left: window.event.clientX - delX
                });

            });

            $(document).on("mouseup", function () {
                // console.log(this);
                // 解除document上的所有事件
                $(document).off();
            });
        });
    };

    drag($("div"));

</script>