jquery UI draggable：满足某些条件时控制（暂停）拖动答案

【问题标题】：jquery UI draggable: control (pause) dragging when some condition is metjquery UI draggable：满足某些条件时控制（暂停）拖动
【发布时间】：2012-10-22 17:52:53
【问题描述】：

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

我不想触发 mouseup 事件，只是暂停。

我在这个JS FIDDLE上有一个完美的例子

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

如果我将容器设置为 .draggable_wrapper，那么我的 UL 列表将被限制在里面......我不想要那个

我想要的是，当我拖动列表时，如果列表位置大于零 (>0) 暂停向右拖动并只允许向左拖动（所以到负位置）.. .

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

而在另一边完全相同的事情....当向左拖动时...我想在 8.li 的右边界穿过容器的右边界时停止（这发生在位置为

为了提高可读性

$(....).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;

});

我该怎么做？约束时类似

【问题讨论】：

标签： jquery jquery-ui draggable

【解决方案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);
    }
});

你会发现一个更新的小提琴here。

【讨论】：

你应该得到这个答案的金牌。谢谢！正是我想要的！

【解决方案2】：

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

这个小提琴是位置覆盖的一个例子：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
        });
});

【讨论】：

感谢您的及时回复...我努力设置了位置：jsfiddle.net/bq7YP/7...但是当满足条件时它停止拖动，我可以将它向左移动。

【解决方案3】：

可以通过定义可拖动区域的边界来限制/约束可拖动元素的移动。看看jquery UI example here

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

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

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

希望这会有所帮助..

【讨论】：