jQuery可拖动：当鼠标移出父级时停止拖动

Question

请检查这个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>​

这是html代码，我在拖动.button_area：

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

除了一件事之外，它一直在起作用。 当我单击红色区域（在第二个黄色正方形中）并开始向左拖动（第一个黄色正方形）时，我希望它在鼠标移到第二个黄色正方形（父对象）上时停止拖动过程。...不是可拖动的对象（助手）...鼠标。

Answer 1

您只能以这种方式修改jquery

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

小费！

一个例子就是：

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

Answer 2

在sokie和Lunik的帮助下，我做到了： jsFIDDLE SOLUTION

多谢你们。

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

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