2

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

我不想触发 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;

});

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

4

3 回答 3

8

您可以使用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);
    }
});

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

于 2012-10-22T18:08:12.583 回答
1

如果您的条件为假，您可以覆盖被拖动元素的位置并应用相同的位置。

这个小提琴是位置覆盖的一个例子：http: //jsfiddle.net/QvRjL/74/

这个小提琴是一个例子，你可以如何检查拖动的元素是否靠近容器的边框：http: //jsfiddle.net/pPn3v/22/

$(document).mousemove(function(e){
   window.mouseXPos = e.pageX;
   window.mouseYPos = e.pageY;
}); 

$('[id^="drag-"]').each(function() {
    $(this).draggable({
        opacity: 0.7,
        cursorAt: { top: 15, left: 50 },        
        scroll: true,
        stop: function(){},  
        drag : function(e,ui){            
            //Force the helper position

            if(myCondition)
            {
                //The draggable element can be moved
                ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
                ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
            }
            else
                return false; //No move allowed
        });
});
于 2012-10-22T18:00:33.380 回答
0

可以通过定义可拖动区域的边界来限制/约束可拖动元素的移动。在这里查看 jquery UI示例

您是否有可能有一个外部父级/包含来限制阻力？您可以执行以下操作..

$( "#draggable5" ).draggable({ containment: "parent" });

该父级在两侧扩展，满足您的计算约束..

希望这可以帮助 ..

于 2012-10-22T18:05:21.773 回答