Take the 2-minute tour ×

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?

share|improve this question

2 Answers 2

up vote 1 down vote accepted

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

share|improve this answer

The main trick is to set the position of the ui helper object within the drag event function.


Here I assume you've a function to calculate the Y limit based on the X position.

    drag: function (e, ui) {
        ui.position.top = limitY(ui.position.left);

Here is a jsFiddle that I created while trying to solve a similar problem myself.

share|improve this answer
This is a much cleaner solution –  maackle Sep 4 '13 at 23:52

Your Answer


