javascript - 使用 ngDraggable 忽略父元素

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

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

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

这是一个显示问题的 plunkr:

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

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

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

最佳答案

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

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

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

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

关于javascript - 使用 ngDraggable 忽略父元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32958203/

相关文章：

html - 如何让空格在 HTML5 中消失