Drag and Drop List in React

In our react applications we organizes some data in the form of list. We can show data in ordered list and unordered list. In our applications, sometimes we needs to set order of our list items. So, to do this we can create drag and drop list in react which is easy to set order of list from UI.

Create Drag and Drop List in React

var placeholder = document.createElement("li");
placeholder.className = "placeholder";

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {...props};
  }
  dragStart(e) {
    this.dragged = e.currentTarget;
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/html', this.dragged);
  }
  dragEnd(e) {
    this.dragged.style.display = 'block';
    this.dragged.parentNode.removeChild(placeholder);

    // update state
    var data = this.state.colors;
    var from = Number(this.dragged.dataset.id);
    var to = Number(this.over.dataset.id);
    if(from < to) to--;
    data.splice(to, 0, data.splice(from, 1)[0]);
    this.setState({colors: data});
  }
  dragOver(e) {
    e.preventDefault();
    this.dragged.style.display = "none";
    if(e.target.className === 'placeholder') return;
    this.over = e.target;
    e.target.parentNode.insertBefore(placeholder, e.target);
  }
    render() {
    var listItems = this.state.colors.map((item, i) => {
      return (
        <li 
          data-id={i}
          key={i}
          draggable='true'
          onDragEnd={this.dragEnd.bind(this)}
          onDragStart={this.dragStart.bind(this)}>{item}</li>
      )
     });
        return (
            <ul onDragOver={this.dragOver.bind(this)}>
        {listItems}
      </ul>
        )
    }
}

Use List Component in React

Now, we have <List /> Component we can use this in our class or functional component. Also, we can pass some props like colors props to our <List /> Component. For example, use this in our App Component.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            colors: ['PHP', 'MYSQL', 'REACT', 'LARAVEL']
        }
    }
    render() {
        return (
            <div>
        <List colors={this.state.colors} /> 
            </div>
        )
    }
}

Style List in React

ul {
  list-style: none;
  margin:0;
  padding:0;
  border: 5px solid #e1e1e1;
  box-shadow: 1px 3px 8px #888; 
}

li {
  padding: 10px 15px;
  background:#eee;
  &:hover {
    background: darken(#eee, 5%);
  }
}

.placeholder {
  background: rgb(255,240,120);
  &:before {
    content: "Drop here";
    color: rgb(225,210,90);
  }
}

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please visit my website.

Thanks:)
Happy Coding:)

Blog

Drag and Drop List in React

Chetan Rohilla

Create Drag and Drop List in React

Use List Component in React

Style List in React

Join Our Newsletter. No Spam, Only the good stuff.

Related