如何禁止 div 的“左”财产不超过指定数量

Question

我正在使用 这个 小型拖动插件将 div.slider 水平拖动到其 div.container 上。 我不希望 div.slider 能够超出 div.container 的边界（不希望它退出）。 因此，当 div.slider 到达其容器 div.container 的最右侧时，我希望它不允许用户将其进一步向右拖动，以便它保留在容器内。

这是我的jquery：

    $(".slider").mouseup(function() {
        var leftStyleValue = $('div.slider').css('left');
        $('.display_value').html(leftStyleValue);

        if (parseInt($('.slider').css('left')) > 100) {
            $('#completion').text("YOU DID IT!");
        }
        else {
            $(".slider").animate({left: 0
            }, 500);
        }

    });

如果我将“mouseup”更改为mousemove，那么它甚至不允许您拖动它，因为它会检查每个像素的移动。现在，我可以将 div.slider 拖到 div.container 之外，当我放开鼠标按钮时，因为我没有在 div.container 上执行 mouseup，所以它什么也不做。

如果您想查看插件代码，请转到上面的站点，复制压缩的插件代码，然后转到 < a href="http://jsbeautifier.org/" rel="nofollow noreferrer">http://jsbeautifier.org/ 并查看未压缩版本。

Answer 1

jQuery UI 的可拖动功能通过 containment 属性支持此功能，您可能需要检查一下以免您修改插件的源代码。

请注意，如果您除了可拖动之外不需要任何其他内容，则可以自定义 jQuery UI 下载包。

编辑

经过一番思考，我想你可以用你的方法做一些修改。您必须：

1. 将一个函数绑定到 .slider 元素的 mousedown 事件以捕获拖动的开始
2. 计算最大左侧位置（以及其他必要的位置）
3. 绑定到 mousemove 事件，检测元素现在所在的位置，检查是否超出限制，如果超出，则将其CSS调整到最大左侧位置

问题出在步骤3中。由于插件也绑定了mousemove事件并不断更改元素的CSS，因此您可能会遇到一些闪烁或奇怪的行为，因为两个 mousemove 函数试图用不同的值编辑 CSS。这就是我建议您编辑插件本身的原因。

无论如何，这是代码的修改版本，应该可以在某种程度上可接受：

$(".slider").mousedown(function() {    
    var $slider = $(this);

    // Get maximum x-position. 
    // The max_x position is equal to the sliders width from the container's right side.
    var max_x = $slider.parent().offset().left + $slider.parent().width() - $slider.width();

    // Track mouse position
    $().mousemove(function(e) {
        if(e.pageX > max_x) {
            $slider.css({
                left: max_x
            });
        }
    });

    // Unbind events to $() to prevent multiple bindings
    $().one('mouseup', function() {
        $().unbind();
    });
});

请注意，如果不检查插件的源代码，我不能保证它可以工作。这就是为什么在插件内实现此行为是明智的。

通常，在 mousemove 和 mousedown 事件之后返回 false; 是明智的，以防止浏览器行为，但我不确定它是否会与插件本身冲突。

而且这个函数只考虑右边界，它会允许元素从容器的其他侧面穿过。但我想如果需要的话你将能够实现这些。