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

Question

当我尝试使用 HTML5 Drag n Drop 创建可排序列表时，放置事件的目标 (e.target) 是放置区域元素的子元素，而不是放置区域元素本身。这是不好的。

我希望以下代码中e.target 的值是包含ondrop="drop(event)" 的div，而不是<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