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

Question

所以，我在一个 div 中有一个 div，两者都是可拖动的。当我尝试拖动子项时，它只会拖动父项。

就好像 parent 在掩盖 child 。

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

(示例代码，因为出于某种原因它是 jsfiddle 链接所必需的)

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();
}

这是我的 jsfiddle .我为困惑道歉，第一次尝试拖放。

您应该能够将元素从底部拖到线上，然后拖到蓝色方 block 中。行中的元素应该可以拖动到其他行中。问题在于将可拖动元素放入蓝色方 block 中，它拖动整条线而不是被点击的子项。

我可能遗漏了一些非常愚蠢的东西，比如 CSS 规则。 >_<

我愿意使用任何库来使它更清洁/更易于维护。

在我尝试学习这个过程中，非常感谢任何帮助。
谢谢!

Answer 1

原来问题出在动态 html 元素上。
除非它们已经在 DOM 中，否则事件监听器不会坚持它们。
为了解决这个问题，我添加了一个隐藏元素，每当我创建一个动态元素时，我首先将它作为子元素添加到隐藏元素中。然后当我准备好使用它时，我将它移动到需要它的地方。这感觉有点老套，但确实有效。