jQuery draggable: Stop dragging when mouse out of parent

Question

Please check out this jsFIDDLE

<div id="wrapper">
    <div class="item">
        <div class="button_area"></div>
        <div class="icon"></div>
    </div>

    <div class="item">
        <div class="button_area"></div>
        <div class="icon"></div>    
    </div>
</div>​

This is the html code, and I am dragging the .button_area:

$('.button_area').draggable({});

It is working as it is suppused to except for one thing. When I click on the red area (in the second yellow square) and start dragging toward left (first yellow square) I want it to stop the drag process when the mouse gets over second yellow square (parent).... not the draggable object (helper)... THE MOUSE.

Answer 1

with sokie's and Lunik's help, I did it: jsFIDDLE SOLUTION

Thanks guys.

$( ".button_area" ).draggable({});

$(".item").mouseout(function() {
    $( '.button_area' ).draggable( 'option',  'revert', true ).trigger( 'mouseup' );
});

Answer 2

You must only modify your jquery this way

$( ".button_area" ).draggable({
drag: function(event, ui) { 
  if(my_condition) 
      return false; }
  });​

Tip!

one example would be something along this:

$( ".button_area" ).draggable({
drag: function(event, ui) { 
  if($('.button_area').offset().left > 50) 
  { 
     $( '.button_area' ).draggable( 'option',  'revert', true ).trigger( 'mouseup' );
  } 
 }
 });​