jquery - 限制容器内的可拖动元素

Question

我在没有使用 jquery ui 库的情况下制作了一个 div 可拖动，但我想制作可拖动的框，而不是离开其容器。

这是我的 demo

$(document).ready(function() {
    var $dragging = null;

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            $dragging.offset({
                top: e.pageY,
                left: e.pageX
            });
        }
    });

    $(document.body).on("mousedown", ".box", function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});​

如何做到这一点？请注意，我没有使用 JQUERY UI。

Answer 1

只要确保...

• 盒子的左侧位置大于容器的左侧位置，并且
• 盒子的右侧位置(左侧位置+盒子宽度)小于容器的右侧位置，并且
• 盒子的顶部位置大于容器的顶部位置，并且
• 盒子的底部位置(顶部位置+盒子高度)小于容器的底部位置

<小时/>

http://jsfiddle.net/KdehU/2/

$(document).ready(function() {
    var $dragging = null;

    var container = $('#container'),
        c_t = container.offset().top,
        c_l = container.offset().left,
        c_b = c_t + container.height(),
        c_r = c_l + container.width();

    $(document.body).on("mousemove", function(e) {
        if ($dragging) {
            var width = $dragging.width();
            var height = $dragging.height();

            var new_y = (e.pageY > c_t && (e.pageY + height) < c_b) ? e.pageY : undefined;
            var new_x = (e.pageX > c_l && (e.pageX + width) < c_r) ? e.pageX : undefined;

            $dragging.offset({
                top: new_y,
                left: new_x
            });
        }
    });

    $(document.body).on("mousedown", ".box", function (e) {
        $dragging = $(e.target);
    });

    $(document.body).on("mouseup", function (e) {
        $dragging = null;
    });
});