使用 ngDraggable 忽略父元素答案

【问题标题】：Ignore parent element using ngDraggable使用 ngDraggable 忽略父元素
【发布时间】：2015-10-05 21:27:43
【问题描述】：

我在一个用户案例中使用 ngDraggable，该用户案例由一个 div 内的一个 div 组成，并且它们都是可拖动的。

我也想重新排序子元素和父元素。

但是，当我尝试移动孩子时，父母也被移动了。

这是一个显示问题的 plunkr：

<div ng-drag="true" class="red-box">
     <div ng-drag="true" class="blue-box">
     </div>
</div>

尝试移动蓝色框，红色会一起拖动。

有人知道如何只移动蓝色框吗？

【问题讨论】：

【解决方案1】：

似乎ng-drag 不是嵌套的。您可以使用 CSS 来获得相同的外观并获得预期的行为。

我已取消嵌套 div（拖动手柄）并将它们绝对定位（您给出的示例最简单的解决方案）。

不使用OP建议的PR的另一种解决方案是在子元素中添加ng-mousedown="$event.stopPropagation()"，即：

<div ng-drag="true" class="red-box">
 <div ng-drag="true" class="blue-box" ng-mousedown="$event.stopPropagation()"></div>
</div>

它阻止父元素接收开始拖动的鼠标按下事件。

【讨论】：

我在 ngDraggable github 上找到了一种解决方法。检查我的答案。再次感谢您。

@rcorreia，请看看我的回答中的另一个解决方案。

不错的一个！我分叉了要在凉亭上使用的代码。这种方法比较好。