Question

我在一个用户案例中使用ngDraggable，该用户案例包含div中的div，并且两者都是可拖动的。

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

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

这是一个显示问题的傻瓜：

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

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

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

Answer 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>

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

Answer 2

分析ngDraggable github上的问题我发现了一个确实有技巧的PR：

在evt.stopImmediatePropagation()和voilà之后添加行if(! _dragEnabled)return。

改变后的傻瓜