如何锁定/冻结/临时禁用jQuery-ui可拖动事件?

时间:2012-10-21 20:18:23

标签: jquery jquery-ui jquery-ui-draggable

以此为例。

http://jsbin.com/ufarif/6/

如果左边的位置小于80,我想冻结元素被拖动到左边。但是,如果我返回false,那么用户根本不能拖动元素(甚至向右)。

handle.draggable('disable');完全被忽略,直到stop事件被触发。

returnreturn true不会停止拖动。

请注意,我知道containment选项,但是,我的条件是动态的,而containment不会将函数作为参数。

1 个答案:

答案 0 :(得分:0)

您可以覆盖被拖动元素的位置。

这个小提琴是位置覆盖的一个例子: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
            ui.position.left = window.mouseXPos - $(this).draggable('option','cursorAt').left;
            ui.position.top = window.mouseYPos- $(this).draggable('option','cursorAt').top; 
        });
});