Chetan Rohilla

Posted on Mar 24, 2022 • Edited on Apr 2, 2023 • Originally published at w3courses.org

Drag and Drop List in React

#react #reactnative #beginners #webdev

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);
  }
}