div随意拖动，基于jquery。

最新推荐文章于 2025-08-15 09:01:53 发布

weixin_34306593

最新推荐文章于 2025-08-15 09:01:53 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webSong/p/7699210.html

本文介绍了一种使用jQuery实现拖拽效果的方法。通过监听鼠标按下、移动及释放等事件，可以使得网页中的元素能够被拖动到指定位置。该技术适用于需要用户交互的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        $("#box").mousedown(function (e) { //e鼠标事件  
                var offset = $(this).position();//DIV在页面的位置  使用position定位
                //var offset = $(this).offset();//DIV在页面的位置  一般使用offset
                var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离  
                var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离  
                var thas = $(this);
                $("body").on("mousemove", function (ev) { //绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件   

                    var _x = ev.pageX - x;//获得X轴方向移动的值  
                    var _y = ev.pageY - y;//获得Y轴方向移动的值  

                    thas.animate({ left: _x + "px", top: _y + "px" }, 10);

                });
            });

            $(".box").mouseup(function () {
                $("body").off("mousemove");
            });

转载于:https://www.cnblogs.com/webSong/p/7699210.html