拖放元素時HTML拖放api不起作用（反應）

Question

我有一個網頁，需要通過拖放方法重新排列單詞。 該應用程序是使用 React 構建的。 我的問題是，當元素被放置在放置區域/區域中時，目標元素設置的 id 為空白。 這是最初的錯誤TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'。 我嘗試在放置過程中控制台記錄 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>
</>
)

Answer 1

您應該在可拖動元素上使用onDragStart而不是onDrag ：

你可以在這里閱讀更多

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;

看到它在CodeSandbox上運行

Answer 2

您需要通過將此代碼添加到要放置的元素來允許拖動。 默認情況下 HTML 不允許放置

    onDragOver={event=>event.preventDefault()}