DEV Community

Cover image for Drag and Drop List in React
Chetan Rohilla
Chetan Rohilla

Posted on • Updated on • Originally published at w3courses.org

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>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

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>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

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);
  }
}
Enter fullscreen mode Exit fullscreen mode

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:)

Top comments (4)

Collapse
 
soulsaw1 profile image
soulsaw1

hey bro

Collapse
 
readymadecode profile image
Chetan Rohilla

Yes bro :)

Collapse
 
soulsaw1 profile image
soulsaw1

are u good at mongodb

Thread Thread
 
readymadecode profile image
Chetan Rohilla

yes