拖放功能失效排查：为何我的元素提示非节点？

你的拖放功能失效的核心原因是动态创建的<p>元素没有设置唯一ID，导致拖放时无法通过ID获取到对应的元素。

具体问题点 #

在drag函数中，你通过ev.dataTransfer.setData("text", ev.target.id)存储了被拖拽元素的ID，但在创建<p>元素的代码里，没有给y（即<p>元素）设置id属性。当执行document.getElementById(data)时，由于找不到对应ID的元素，会返回null，进而引发appendChild的报错。

修复步骤 #

1. 给动态创建的<p>元素添加唯一ID
   修改循环创建元素的代码，给每个<p>元素生成唯一ID，比如利用循环索引：

   lienClient.forEach((lien, index) => {
     var x = document.createElement("div");
     var y = document.createElement("p");
     var z = document.getElementById("liensUrlClientBody");
   
     // 给p元素设置唯一ID
     y.setAttribute("id", `draggable-p-${index}`);
   
     x.setAttribute("ondrop", "drop(event)")
     x.setAttribute("ondragover", "allowDrop(event)")
     x.setAttribute("style", "height: 550px;") // 注意：height属性需通过style设置才生效
   
     y.setAttribute("draggable", "true")
     y.setAttribute("ondragstart", "drag(event)")
     y.innerHTML = lien.lien
   
     x.appendChild(y)
     z.appendChild(x)
   })
   

2. 优化drop函数（可选，提升鲁棒性）
   当拖拽到<p>元素本身时，ev.target会是<p>而不是父容器<div>，此时appendChild会把元素放到<p>里面，不符合预期。可以修改drop函数，确保找到正确的容器：

   function drop(ev) {
     ev.preventDefault();
     var data = ev.dataTransfer.getData("text");
     const draggedElement = document.getElementById(data);
     if (!draggedElement) return;
   
     // 向上查找可放置的div容器
     let targetContainer = ev.target;
     while (targetContainer && !targetContainer.hasAttribute("ondrop")) {
       targetContainer = targetContainer.parentElement;
     }
     if (targetContainer) {
       targetContainer.appendChild(draggedElement);
     }
   }
   

验证 #

修改后，每个<p>元素都有了唯一ID，拖放时就能正确获取到元素，完成拖放操作。

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