JavaScript拖拽功能报错：appendChild执行失败问题求助

错误原因 #

你在drop事件处理函数里的最后一行传错了参数：

seccion.appendChild(id_parrafo)

这里的id_parrafo是从dataTransfer里拿到的字符串ID，但appendChild()方法必须传入DOM节点对象，不是字符串。你已经通过document.getElementById(id_parrafo)获取到了正确的DOM节点（存在parrafo变量里），直接用这个变量就行。

修正后的完整代码 #

const p = document.querySelectorAll(".p")
const s = document.querySelectorAll(".s")

p.forEach(parrafo => {
    parrafo.addEventListener("dragstart", event => {
        parrafo.classList.add("dragging")
        event.dataTransfer.setData("id", parrafo.id)
    })

    parrafo.addEventListener("dragend", () => {
        parrafo.classList.remove("dragging")
    })
})

s.forEach(seccion => {
    seccion.addEventListener("dragover", event => {
        event.preventDefault()
    })

    seccion.addEventListener("drop", event => {
        const id_parrafo = event.dataTransfer.getData("id")
        const parrafo = document.getElementById(id_parrafo)
        // 这里改成传入parrafo节点，不是id字符串
        seccion.appendChild(parrafo)
    })
})

额外注意 #

确保所有带.p类的<p>元素都设置了唯一的id属性，否则document.getElementById()可能无法正确获取到目标节点，或者拿到错误的节点。

内容的提问来源于stack exchange，提问作者Maximo