Question

Take this for example.

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

I want to freeze the element from being dragged to the left if left position is less than 80. However, if I return false, then user cannot drag the element at all (even to the right).

handle.draggable('disable'); is completely ignored until the stop event is triggered.

return or return true doesn’t stop the dragging.

Note that I am aware about the containment option, however, my condition is dynamic and containment doesn’t take function as an argument.

Answer 1

You could overwrite the position of the element being dragged.

This fiddle is an example of the position overriding : http://jsfiddle.net/QvRjL/74/

This fiddle is an example of how you could do to check if the dragged element is near a border of your container : 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; 
        });
});