为什么HTML5拖放的目标是孩子?(可排序列表）

Why does HTML5 Drag n Drop target child? (Sortable List)

本文关键字：排序 列表 孩子 拖放 HTML5 目标 为什么      更新时间：2023-09-26

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

我希望以下代码中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));   
}

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

编辑：我希望了解本地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);
}

这是更新的fiddle

相关文章：