jquery UI 可拖动 : control (pause) dragging when some condition is met

Question

当拖动一个元素时，我正在做一些计算，当某个条件匹配时，我希望拖动暂停。

我不想触发 mouseup 事件，只需暂停即可。

我有一个完美的例子 JS FIDDLE

请查看一个容器和一个矩形列表。我想要实现的目标与遏制有些相反......

如果我将遏制设置为 .draggable_wrapper，那么我的 UL 列表将被限制在内部......我不希望这样

我想要的是，当我拖动列表时，如果列表位置大于零(>0)，则暂停向右拖动并仅允许向左拖动(因此到负位置)。 .

我不希望第一个 LI 的左边框到达容器左边框的右侧...

在另一边完全相同的事情....当向左拖动时...我想在 8.li 的右边框穿过容器的右边框时停止(这种情况发生在位置为 < 的示例中)大于-55px；

为了使其更具可读性

$(....).draggable({
....
drag: function(){
var p_left = $(this).position().left;

if(left > 0) stop_dragging_right, allow only left;
if(left < -55px) sto_dragging_left, allow_only_right;

});

我怎样才能做到这一点？约束时也类似

Answer 1

您可以使用 offset() 获取包装元素的坐标并通过在containment中传递一个数组来提供您自己的遏制框选项:

var wrapperOffset = $(".draggable_wrapper").offset();
$('.draggable_wrapper ul').draggable({
    distance: 3,
    axis: "x",
    revert: false,
    scroll: false,
    containment: [
        wrapperOffset.left - 55,
        wrapperOffset.top,
        wrapperOffset.left,
        wrapperOffset.top
    ],
    drag: function(e) {
        $('#posx').val($(this).position().left);
    }
});

您会发现更新的 fiddle here .