为什么HTML5拖放目标是孩子？ （可排序列表）

Question

当我尝试使用HTML5 Drag n Drop创建可排序列表时，drop事件（e.target）的目标是drop-zone元素的子节点，而不是drop-zone元素本身。这是不好的。

我希望以下代码中e.target的值为div，其中包含ondrop="drop(event)"而不是<p>子代。

使用完整示例链接到JSFiddle。

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

这是因为事件冒泡还是类似的事情而发生的？什么是帮助我创建Drag n Drop可排序列表的最佳修复方法？

编辑：我希望了解原生HTML5和Javascript，而不是使用jQuery库或其他类似的东西。

Answer 1

您正在尝试追加目标元素，因此您遇到了问题。

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

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

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

以下是更新后的fiddle