react 拖拽

用于拖动的元素

<div draggable onDragStart={(e) => {
  e.dataTransfer.setData('key', value);
}} className="element">A</div>
复制代码

拖动元素放置的面板

<div className="canvas"
  onDragOver={(e) => e.preventDefault()}
  onDrop={(e) => console.log(e.dataTransfer.getData('key'))}
></div>
复制代码

需要注意的是，setData只能在onDragStart里设置。
onDragOver必须用e.preventDefault()覆盖，onDrop事件才能用getData获取值。