Javascript 为什么HTML5会拖放目标子对象？（可排序列表）

当我尝试使用HTML5 Drag n Drop创建可排序列表时，Drop事件的目标（

e.target

）是Drop zone元素的子元素，而不是Drop zone元素本身。这很糟糕

我希望下面代码中

e.target

的值是包含

ondrop=“drop（event）”

的

div

，而不是它的

子级

用完整的例子链接到

function drop(e) {
    e.preventDefault();
    var data = e.dataTransfer.getData("text");
    e.target.appendChild(document.getElementById(data));   
}

这是因为事件冒泡还是类似的原因？帮助我创建拖放可排序列表的最佳修复方法是什么

---

编辑：我希望了解本机HTML5和Javascript，而不是使用jQuery库或类似的库。

您试图附加到目标元素，因此您将面临问题

您应该尝试在目标元素之前插入元素

function drop(e) {
    e.preventDefault();

    var data = e.dataTransfer.getData("text");
    var list = document.getElementById("list");
    list.insertBefore(document.getElementById(data), e.target.parentNode);
}

---

以下是更新的

我想确实解释了一些问题您的链接帮助我理解了这个问题。下面是您的链接中的一句话：“因为在父节点上的

dragleave

事件之前，在子节点上触发了

dragenter

事件”。您的答案解决了我的问题，但是为什么当只有父节点

具有放置区域代码时，

标记被视为放置区域？（

ondragover=“allowDrop（event）”

）此外，这是HTLM5拖放标准的正确实现吗？或者它在某种程度上是粗俗和不正确的。在阅读了HTML5拖放版上的Quirksmode之后，您对触摸它非常谨慎。b

e.target

仍然是子节点-我们只是围绕着c。每一篇关于可排序HTML5拖放列表的帖子都包含大约10倍的代码，这让我很担心。您的想法是什么？它很简单，但是您在JSFIDLE示例中包含了jquery，而它没有被使用。误导初学者！