Javascript 父级隐藏的其他可拖动元素事件中的可拖动元素

我在一个div里面有一个div，两个都可以拖动。 当我尝试拖动子对象时，它只拖动父对象

这就好像父母在掩蔽孩子一样

我尝试在子事件侦听器中将useCapture设置为true，因为这将强制首先调用子事件。然后在handleDragStart方法中调用stopPropogation（），希望它能取代父事件。没有骰子

（示例代码，因为出于某种原因JSFIDLE链接需要它）

这是我的。我很抱歉弄得一团糟，这是我第一次尝试拖放

您应该能够将元素从底部拖到线条上，然后拖到蓝色正方形中。行中的元素应可拖动到其他行中。问题在于，如果将可拖动元素放置在蓝色方块中，它会拖动整条线，而不是单击的子线

---

我可能错过了一些非常愚蠢的东西，比如CSS规则_ 原来问题在于动态html元素。
除非事件侦听器已经在DOM中，否则它们将不会继续使用它们。

---

为了解决这个问题，我添加了一个隐藏元素，每当我创建一个动态元素时，我首先将它作为子元素添加到隐藏元素中。然后，当我准备好使用它时，我会将它移动到需要的地方。这感觉有点骇人，但它可以工作。

Garret，您可以使用不透明度或可见性，因此可以减少节点HTML元素。

var parentPiece = document.createElement('div');
parentPiece.setAttribute('draggable', true);
parentPiece.addEventListener('dragstart', handleDragStart, false);

...

var childPiece = document.createElement('div');
childPiece.setAttribute('draggable', true);
childPiece.addEventListener('dragstart', handleDragStart, true);

...

function handleDragStart(e) {
    console.log(this.outerHTML);
    e.dataTransfer.effectAllowed = 'move';
    e.stopPropagation();
}