父级

Question

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

好像父母正在掩饰孩子。

我尝试在子事件监听器中将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。我为这个烂摊子道歉，第一次尝试拖拉。

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

我可能错过了一些像CSS规则那样愚蠢的东西。 ＆GT; _＆LT;

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

我试图了解这一点时，非常感谢任何帮助 谢谢！

Answer 1

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