The react drag

The element used for dragging

<div draggable onDragStart={(e) => {
  e.dataTransfer.setData('key', value);
}} className="element">A</div>
Copy the code

Drag the panel where elements are placed

<div className="canvas"
  onDragOver={(e) => e.preventDefault()}
  onDrop={(e) => console.log(e.dataTransfer.getData('key'))}
></div>
Copy the code

Note that setData can only be set in onDragStart. OnDragOver must be overridden with e.preventDefault() for the onDrop event to get its value with getData.