javascript - 使用 ngDraggable 忽略父元素

Question

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

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

但是，当我尝试移动 child 时， parent 也被移动了。

这是一个显示问题的 plunkr:

http://plnkr.co/edit/xhLgXW0hPxLucQiKt6Q1?p=preview

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

尝试移动蓝色方 block ，红色方 block 会被拖到一起。

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

Answer 1

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

我已经取消嵌套 div(拖动 handle )并绝对定位它们(​​对于您给出的示例来说是最简单的解决方案)。

http://plnkr.co/edit/cQ3aUmhvIoK58b88UpRv?p=preview

---

另一种不使用 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>

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

http://plnkr.co/edit/onwCzYy4mtI8pz1mSoNV?p=preview