如何解决使用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 举报,一经查实,本站将立刻删除。