jQuery可拖动：当鼠标离开父级时停止拖动答案

【问题标题】：jQuery draggable: Stop dragging when mouse out of parentjQuery可拖动：当鼠标离开父级时停止拖动
【发布时间】：2012-10-08 15:12:12
【问题描述】：

请查看此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({});

除了一件事之外，它的工作方式与它所希望的一样。当我单击红色区域（在第二个黄色方块中）并开始向左拖动（第一个黄色方块）时，我希望它在鼠标经过第二个黄色方块（父级）时停止拖动过程....不是可拖动的对象（助手）...鼠标。

【问题讨论】：

标签： jquery draggable mouseout

【解决方案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' );
  } 
 }
 });

【讨论】：

嘿，我知道...现在告诉我“my_condition”是什么；）
更好用 $(".item").mouseout(function() { /* 在这里停止代码*/ });
所以不应该是一个代码编写网站，我们可以为您指明正确的方向，而不是为您编写代码，jquery 文档甚至为您提供了一个可拖动的演示和关于约束jqueryui.com/demos/draggable/#constrain-movement跨度>
看，只需要一点研究。
我做了所有的研究，如果没有这里提供的帮助，我不会这么快完成，谢谢

【解决方案2】：

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

谢谢大家。

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

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

【讨论】：

你应该看看 dragable 的包含属性，它为你做所有事情，不需要做自定义代码来限制，就像我在这里展示的那样jqueryui.com/demos/draggable/#constrain-movement
:S 你有没有检查过我在 jsfiddle 中提供的例子？我不希望可拖动的被包含，因为它必须进入负边界！！！当鼠标指针离开容器时我想停止拖动......我明确强调了这一点！
我只是提供了一个链接以获取更多文档，我并没有对你强加任何东西