Question

我正在使用this微小的拖动插件将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.container之外拖动div.slider，当我放开鼠标按钮时，因为我没有在div.container上做一个mouseup，它什么也没做。

如果您想查看插件代码，请转到上面的网站，复制压缩的插件代码，然后转到 http://jsbeautifier.org/并查看未压缩的版本。

Answer 1

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

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

修改

经过一番思考后，我猜你可以通过一些修改来实现你的方法。你必须：

将函数绑定到.slider元素的mousedown事件以捕获拖动的开始

计算最大左侧位置（以及必要时的其他位置）

绑定到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事件之后return false;明智地阻止浏览器行为，但我不确定它是否会与插件本身混淆。

此功能仅考虑右边界，它将允许元素从容器的其他边穿过。但我想如果需要的话，你将能够实现这些。

如何禁止div的'left'属性超过指定的数量

1 个答案: