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:)
Top comments (4)
hey bro
Yes bro :)
are u good at mongodb
yes