jquery UI draggable:满足某些条件时控制(暂停)拖动

Question

当拖动一个元素时,我正在进行一些计算,当某个标准匹配时,我想拖动暂停.

我不想触发鼠标事件,只是暂停.

我在这个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()获取包装元素的坐标,并通过在包含选项中传递数组来提供您自己的包含框:

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);
    }
});

你会在这里找到一个更新的小提琴.