jQuery实现拖动

蔚蓝蒲公英

于 2017-08-01 16:51:58 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端文章标签： jquery 对象鼠标浏览器拖拽

本文链接：https://blog.csdn.net/Tan_D/article/details/76546215

web前端专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用jQuery实现拖动功能。通过设置对象定位、捕获鼠标坐标，结合mousedown、mouseup、mousemove事件，以及bind()和unbind()方法，实现元素的拖拽交互。同时，文章还提及了通过event.button判断鼠标按键状态。

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

jQuery实现拖动

思路：

定位：给要拖动的对象设置一个定位（position：aboselute);
坐标：使用event.clientX、event.clientY获取鼠标位置，使用obj.offset().left、obj.offset().top获取对象离浏览器左上角的坐标；
事件：mousedown,mouseup,mousemove三大鼠标事件；
事件绑定与移除：bind()和unbind()；
鼠标键的判断：使用event.button可以获得鼠标码（0：左键，1：滑轮，2：右键）
代码如下：

    function drag(obj)    //obj为需要拖动DOM的jQuery对象
    {
        obj.bind("mousedown",start);
        function start(event){
            if(event.button == 0){
                deltaX = event.clientX - obj.offset().left;
                deltaY = event.clientY - obj.offset().top;
                $(document).bind("mousemove",move);
                $(document).bind("mouseup",stop);
            }
            return false;
        }
        function move(event){
            obj.css({
                "left":(event.clientX-deltaX)+'px',
                "top":(event.clientY-deltaY)+'px'
            });
            return false;
        }
        function stop(){
            $(document).unbind("mousemove",move);
            $(document).unbind("mouseup",stop);
            return false;
        }
    }