Create Drag and Drop List in React – Jaeves Codelab

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

Recommendation

Using MongoDB in Node.js

Create Barcode in React

Create QR Code in React

How to validate form in React

Using MongoDB with Laravel

How to create charts in ReactJS

Basic Query In MongoDB

MultiSelect Components in React

Types of Storage For React

Card Components in React

For more React Tutorials Click here, Node.js Tutorials Click here.