Question

I need to use jQuery draggable in quite a complicated geometrical shape, and it is not possible to calculate the frame beforehand.

So, containment option isn’t cut for solving this problem.

I’ve been thinking about drag function, checking my condition and returning false to prevent dragging.
But, the problem is, that after returning false from drag function for the first time, dragging process stops, as if user have released the mouse button.

Any suggestions on preventing dragging out of the shape without canceling dragging process?

Answer 1

I have solved similar issue with resizable. I had to manually set sizes though.
Try something like that:

yourdraggable.bind( 'drag', function() {

  var left = $(this).css('left'),
      top = $(this).css('top'),
      width = $(this).width(), 
      height= $(this).height();

  //determine if dragging should contain or continue

  //if contain 
  $(this).css( { left: containLeft, top: containTop } );

});

You could analyze left and top separately but you got the idea