Simple drag and drop

simpleDragnDrop.js

import React from "react";

const styles = {
  width: "200px",
  border: '1px solid #222',
  height: "200px",
  display: "inline-block",
  verticalAlign: "top",
  background: "#fff"
};

class DragNDrop extends React.Component {

  handleDragStart = e => {
    e.dataTransfer.setData("text", e.target.id);
  };

  // not important
  handleDragEnd = e => {
    e.preventDefault();
  };

  // this handles what happens onDrop
  handleDrop = e => {
    e.preventDefault();
    const data = e.dataTransfer.getData("text");
    alert(data);
  };

  // important!! not going to work without this
  handleDragOver = e => {
    e.preventDefault();
  };

  render() {
    const box = (
      <div id="drag-box" className="drag-box" draggable="true" onDragStart={this.handleDragStart} onDragEnd={this.handleDragEnd}>
        <h1>
          <b>draggable content</b>
        </h1>
      </div>
    );
    return (
      <div className="drag-n-drop">
        <div
          id="drop-1"
          className="drop-zone"
          style={styles}
          onDrop={this.handleDrop}
          onDragOver={this.handleDragOver}
        >
          BOX 1
          {box}
        </div>
        <div
          id="drop-2"
          className="drop-zone"
          style={styles}
          onDrop={this.handleDrop}
          onDragOver={this.handleDragOver}
        >
          BOX 2
        </div>
      </div>
    );
  }
}

export default DragNDrop;