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

Question

当我尝试使用 HTML5 拖放创建可排序列表时，拖放事件 (e.target) 的目标是 drop-zone 的 child元素，而不是 drop-zone 元素本身。这是不好的。

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

Link 到 JSFiddle 以及完整示例。

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

发生这种情况是因为事件冒泡还是类似的原因？帮助我创建拖放排序列表的最佳修复是什么？

编辑：我想了解原生 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