jq实现元素拖动函数，并让其不能超出父元素

最新推荐文章于 2026-03-28 03:29:58 发布

原创最新推荐文章于 2026-03-28 03:29:58 发布 · 3.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery

jquery 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何利用jQuery创建一个可拖动的元素，并确保它不会超出其父元素的边界。通过监听鼠标事件和计算偏移量，我们可以实现这一功能，提供更好的用户体验。

obj1，obj3是jQuery对象。obj1是子元素的jQuery对象，obj3是父元素的jQuery对象。

var drag = function (obj1,obj3) {
    obj1.bind("mousedown", start);
    var x;
    var y;
    var gapX;
    var gapY;
    function start(event) {
        if (event.button == 0) {//判断是否点击鼠标左键
            gapX = event.clientX - obj1.offset().left + obj3.offset().left;//这是计算在减去鼠标相对于子元素的偏移量后，父元素相对于屏幕的横向距离。
            gapY = event.clientY - obj1.offset().top + obj3.offset().top;//与gapX同理
            //movemove事件必须绑定到$(document)上，鼠标移动是在整个屏幕上的
            $(document).bind("mousemove", move);
            //此处的$(document)可以改为obj
            $(document).bind("mouseup", stop);
        }
        return false;//阻止默认事件或冒泡
    }

    function move(event) {
        x = event.clientX - gapX;//用鼠标相对于屏幕的横向距离减去父元素相对于屏幕的横向距离
        y = event.clientY - gapY;

if(x < 0) {//限制obj1移出obj3左端 x = 0;  }  //限制obj1移出obj3的右端 
else if(x > (obj3[0].offsetWidth - obj1[0].offsetWidth)) 
  { x = obj3[0].offsetWidth - obj1[0].offsetWidth; } 
if(y < 0) {//限制obj1移出obj3的上边界 y = 0; } 
else if(y > ( obj3[0].offsetHeight - obj1[0].offsetHeight )) 
  { y = obj3[0].offsetHeight - obj1[0].offsetHeight ; }

 obj1.css({
            "left": x + "px",
            "top": y + "px"
        });
        return false;//阻止默认事件或冒泡
    }

    function stop() {
        //解绑定，这一步很必要，前面有解释
        $(document).unbind("mousemove", move);
        $(document).unbind("mouseup", stop);

    }
};