前端学习笔记之拖拽

最近学习到Jquery部分,刚好在写拖拽的作业,于是就想把这一部分的作业分享出来和大家交流一下!

<body>
    <div class="box">
    </div>
    <script src="../JQ/jquery(2)/jQurey/jQurey各版本/jquery-3.3.1.js"></script>
    <script>
        $(document).on("mousedown", "div", function (e) {
            const { offsetX: x1, offsetY: y1 } = e;
            $(document).on("mousemove", e => {
                const { pageX: x2, pageY: y2 } = e;
                $(this).css({
                    left: x2 - x1,
                    top: y2 - y1,
                });
            })
        });

        $(document).on("mouseup", function (e) {
            $(document).off("mousemove");
        })
    </script>
</body>
posted @ 2020-05-31 22:23  昨夜小楼又东风。  阅读(115)  评论(0编辑  收藏  举报