Простое перетаскивание в React

Давайте не будем терять время и сразу перейдем к коду.

import React, { Component } from 'react';
import './drag.less';
export default class ToDoDragDropDemo extends Component {
constructor(props){
 super(props);
this.state={
tasks: [
{id: "1", taskName:"Read book",type:"inProgress", backgroundColor: "red"},
{id: "2", taskName:"Pay bills", type:"inProgress", backgroundColor:"red"},
{id: "3", taskName:"Go to the gym", type:"Done", backgroundColor:"green"},
{id: "4", taskName:"Play baseball", type:"Done", backgroundColor:"green"},
{id: "5", taskName:"Go to the work", type:"inProgress", backgroundColor:"red"}
]
}
}
onDragStart = (event, taskName) => {
event.dataTransfer.setData("taskName", taskName);
}
onDragOver = (event) => {
event.preventDefault();
}
onDrop = (event, cat) => {
let taskName = event.dataTransfer.getData("taskName");
let tasks = this.state.tasks.filter((task) => {
if (task.taskName == taskName) {
task.type = cat;
cat==="Done"?task.backgroundColor = "green":task.backgroundColor = "red";
}
return task;
});
this.setState({
...this.state,
tasks
});
}
render() {
let tasks = {
inProgress: [],
Done: []
}
this.state.tasks.forEach ((task) => {
tasks[task.type].push(
<div key={task.id}
onDragStart = {(event) => this.onDragStart(event, task.taskName)}
draggable
className="draggable"
style = {{backgroundColor: task.backgroundColor}}>
{task.taskName}
</div>
);
});
return (
<div className="drag-container">
<h2 className="head">Drag & Drop</h2>
<div className="inProgress"
onDragOver={(event)=>this.onDragOver(event)}
onDrop={(event)=>{this.onDrop(event, "inProgress")}}>
<span className="group-header">In Progress</span>
{tasks.inProgress}
</div>
<div className="droppable"
onDragOver={(event)=>this.onDragOver(event)}
onDrop={(event)=>this.onDrop(event, "Done")}>
<span className="group-header">Done</span>
{tasks.Done}
</div>
</div>
);
}
}

Итак, в файле drag.jsx вы прописываете весь функционал и импортируете его.

У вас есть объект задачи, который представляет собой набор задач, которые необходимо выполнить, и задач, которые выполняются.

У вас есть три основные функции. onDrop, onDragStart, onDragOver

Перетаскивание достигается за счет того, что свойство элемента div становится перетаскиваемым, а затем вызываются следующие функции.

Рассмотрим файл css

.App {
width: 100%;
margin: 10px auto;
}
.drag-container {
text-align: center;
}
.head {
display: inline-block;
margin: 10px;
padding: 0;
background-color: #CCCCCC;
width:100%;
}
.droppable {
position: absolute;
width: 200px;
height: 500px;
right: 50px;
top: 10;
background-color: #9E9E9E;
border-left: 2px dotted red;
}
.draggable {
width: 100px;
height: 100px;
background-color: yellow;
margin: 10px auto;
}
.inProgress {
position: absolute;
width: 200px;
height: 500px;
left: 0;
top: 10;
background-color: #EEEEEE;
border-right: 2px dotted red;
}

После копирования всего кода это будет выглядеть примерно так:

Теперь вы можете перетаскивать статус задач.

Спасибо за ваше время, надеюсь, что это было полезно…

*********************КОНЕЦ*******************