使用Web API在React中实现拖放

问题描述

当我尝试拖动一个元素时，我会得到：

NoModificationAllowedError 不允许对此文档进行修改

代码如下：

export default function App() {
  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const onDragStart = (e) => {
    e.preventDefault();
    e.stopPropagation();

    const dt = e.dataTransfer;
    dt.setData("text/plain",e.target.id);
    dt.effectAllowed = "move";
  };
  return (
    <div className="App">
      <div
        id="1"
        className="box"
        draggable
        // onDrop={(e) => handleDrop(e)}
        onDragOver={(e) => handleDragOver(e)}
        onDragEnter={(e) => onDragStart(e)}
      ></div>

      <div className="drop-zone" draggable></div>
    </div>
  );
}

这里是一个沙盒，您可以自己尝试： https://codesandbox.io/s/nameless-surf-8ykte?file=/src/App.js:51-656

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）