React drag n drop example

reactdragndrop.js

state = {
  items: ['DRAG ME 1', 'DRAG ME 2', 'DRAG ME 3'],
  draggingId: undefined,
  droppedId: undefined
}

  dragStart = (e) => {
    let id = e.target.getAttribute("data-id")
    this.setState({ draggingId: id })
  }
  dragOver = (e) => {
    e.preventDefault()
  }
  onDrop = (e) => {
    var id = parseInt(this.state.draggingId) + 1
    this.setState({ droppedId: id })
  }

  render() {
    return (
      <div className="App">

        <ul className="columns">
          {
            this.state.items.map((item, i) => {
              const draggingId = (i == this.state.draggingId) ? "dragging" : "";
              return (
                <li className={draggingId}
                  data-id={i}
                  key={i}
                  draggable="true"
                  onDragStart={this.dragStart}
                  onDragEnd={this.dragEnd}>
                  {item}
                </li>
              )
            })
          }
        </ul>

        <ul className="columns">
          <li
            className="drop-here"
            onDrop={this.onDrop}
            draggable="true"
            onDragOver={this.dragOver}
          >
            DROP HERE
            <br />
            <span>Has item: { this.state.droppedId }</span>
          </li>
        </ul>

      </div>
    );
  }
  
  

// CSS
//
//  .columns {
//  display: flex;
//  list-style: none;
//  padding: 0;
//}
//.columns li {
//  padding: 30px;
//  margin: 10px;
//  background-color: white;
//  border: 4px solid #000;
//  transition: 0.2s;
//  color: #000;
//  font-size: 20px;
//  width: 10%;
//  height: 100%;
//  text-align: center;
//}
//
//.columns li.drop-here {
//  background: orange;
//}
//
//.columns .isEnabled, .columns .dragging {
//  background-color: #6ad66a;
//}
//