Javascript HTML拖拽&；丢弃元素时丢弃api不工作（React）

我有一个网页，需要通过拖放方法重新排列单词。该应用程序是用React构建的。我的问题是，当在放置区域/区域中放置元素时，目标元素设置的id为空。这是原始错误TypeError:未能在“节点”上执行“appendChild”：参数1不是“节点”类型。我尝试在拖放期间将id文本记录到控制台中，但它显示为空

const handleDragStart = (e:DragEvent<HTMLHeadingElement>) => {
    
    e.dataTransfer.dropEffect = "move";
    e.dataTransfer.setData("elementID", e.target.id);
}

const handleDragDrop = (e:DragEvent<HTMLDivElement>) => {
    
    const data = e.dataTransfer.getData("elementID");
    console.log(data) //prints nothing
    e.target.appendChild(document.getElementById(data));
}

const handleDragOver = (e:DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
}

return(
<>
   <div className="display-flex">
        {["before", "calm", "storm", "the"].map((elem, i)=>(
            <h4 key={elem} id={`draggable-${i}`} draggable="true" onDrag={handleDragStart} className="px-1 b-1 m-1">{elem}</h4>
        ))}
   </div>
   <div className="b-1 p-1 h-2" onDrop={handleDragDrop} onDragOver={handleDragOver}>
            <p>Drop Zone</p>
   </div>
</>
)

const handleDragStart=（e:DragEvent）=>{
e、 dataTransfer.dropEffect=“移动”；
e、 dataTransfer.setData（“elementID”，即target.id）；
}
常量handleDragDrop=（e:DragEvent）=>{
const data=e.dataTransfer.getData（“elementID”）；
console.log（数据）//不打印任何内容
e、 target.appendChild（document.getElementById（数据））；
}
const handleDragOver=（e:DragEvent）=>{
e、 预防默认值（）；
e、 dataTransfer.dropEffect=“移动”；
}
返回(
{[“之前”，“平静”，“风暴”，“the”].map（（elem，i）=>(
{elem}
))}
下降区

)

您应该在可拖动元件上使用

onDragStart

而不是

onDrag

：

你可以读更多

从“React”导入React；
常量Com=（）=>{
常数阻力=（e）=>{
e、 dataTransfer.setData（“id”，即target.id）；
e、 dataTransfer.dropEffect=“移动”；
};
常量handleDragDrop=（e）=>{
e、 预防默认值（）；
const data=e.dataTransfer.getData（“id”）；
const el=document.getElementById（数据）；
el&&e.target.appendChild（document.getElementById（数据））；
};
常数handleDragOver=（e）=>{
e、 预防默认值（）；
e、 dataTransfer.dropEffect=“移动”；
};
返回(
{[“123”].map（（elem，i）=>(
{elem}
))}
下降区

);
};
导出默认Com；

---

查看它在CodeSandbox上运行的情况

您应该在可拖动元素上使用

onDragStart

而不是

onDrag

：

你可以读更多

从“React”导入React；
常量Com=（）=>{
常数阻力=（e）=>{
e、 dataTransfer.setData（“id”，即target.id）；
e、 dataTransfer.dropEffect=“移动”；
};
常量handleDragDrop=（e）=>{
e、 预防默认值（）；
const data=e.dataTransfer.getData（“id”）；
const el=document.getElementById（数据）；
el&&e.target.appendChild（document.getElementById（数据））；
};
常数handleDragOver=（e）=>{
e、 预防默认值（）；
e、 dataTransfer.dropEffect=“移动”；
};
返回(
{[“123”].map（（elem，i）=>(
{elem}
))}
下降区

);
};
导出默认Com；

---

看到它在CodeSandbox上运行了吗

什么是

元素

？它是一个数组吗？你能把它添加到代码段中吗？它们只是字符串数组。为什么它在这里很重要？什么是

元素

？它是一个数组吗？你能把它添加到代码段中吗？它们只是字符串数组。为什么这在这里很重要？

import React from "react";

const Com = () => {
  const drag = (e) => {
    e.dataTransfer.setData("id", e.target.id);
    e.dataTransfer.dropEffect = "move";
  };
  const handleDragDrop = (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData("id");
    const el = document.getElementById(data);
    el && e.target.appendChild(document.getElementById(data));
  };

  const handleDragOver = (e) => {
    e.preventDefault();
    e.dataTransfer.dropEffect = "move";
  };

  return (
    <>
      <div className="display-flex">
        {["123"].map((elem, i) => (
          <h4
            key={elem}
            id={`draggable-${elem}`}
            draggable="true"
            onDragStart={drag}
            className="px-1 b-1 m-1"
          >
            {elem}
          </h4>
        ))}
      </div>
      <div
        className="b-1 p-1 h-2"
        onDrop={handleDragDrop}
        onDragOver={handleDragOver}
      >
        <p>Drop Zone</p>
      </div>
    </>
  );
};
export default Com;