Автор оригинала: temitope emmanuel.
Так что недавно я узнал, что работал над проектом, который требовал мне реализовать функцию перетаскивания. Без предварительного знания о том, как это работает, во-первых, я делал Google There Out, постарайтесь получить контекст на том, как Drag и Drop даже работает.
Я обнаружил, что HTML5 уже имеет это свойство, которое сделало жизнь проще, но только если бы я просто строил веб-страницу без рамки, как реагировать. Я смог пройти свой путь через реализацию его.
Движение вперед, HTML5 имеет четыре свойства, чтобы сделать перетаскивание работы; Перетащить, Ondragstart, OnDragover и OnDrop.
Перетащить , когда добавляется в качестве атрибута к элементу HTML, делает целевой элемент для перезарядки.
ondragstart , называется немедленно, элемент перетащил. Обычно содержание, которое необходимо перетащить, установлено на данный момент.
Ondragover , добавляется в качестве слушателя события к элементу, где будет отброшенный контент. Другими словами, он используется для уточнения того, где содержимое должно быть отброшено.
OnDrop , называется немедленно, притащенное содержание выпускается на элементе, который содержит слушатель события OnDragover.
Больше подробной информации и объяснения их можно найти здесь.
Со всеми этими известными, реализующиеся в реакции не сложно, как это могло бы звучать в начале справа? 😉. Поэтому для реализации этой функции в реакции мы будем создавать простой диспетчер задач, как Trello 😎.
Итак, для начала, у нас есть наш код в файле App.css и app.jsx ниже
.App {
display: flex;
flex-direction: row;
}
.todos {
background: grey;
height: 100px;
width: 100px;
margin: 10px;
}
.done {
background: grey;
height: 100px;
width: 100px;
margin: 10px;
}
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
todos: [
{
taskID: 1,
task: 'Walk the walk'
},
{
taskID: 2,
task: 'Talk the talk'
},
{
taskID: 3,
task: 'Jump the jump'
}
],
completedTasks: [],
draggedTask: {}
}
}
render() {
const { todos, completedTasks} = this.state;
return (
{
todos.map(todo =>
{todo.task}
)
}
{completedTasks.map((task, index) =>
{task.task}
)}
);
}
}
export default App;
Таким образом, в вышеуказанных кодовых фрагментах у нас есть массив TODOS, пустой массив завершенных катаков в нашем состоянии, а также пустой объект, инициализированный в нашем состоянии. Кроме того, у нас есть два главных детяных девса (TODOS и сделано), содержащиеся в родительском Div с приложением ClassName. Хотя верхний фрагмент содержит CSS.
Идея этого простого приложения состоит в том, чтобы переместить элементы из массива Todos в выполненные задачи массива и отображать изменения (что является то, что реагирует в любом случае 🤓).
Первый шаг состоит в том, чтобы сделать каждый дочерний элемент DIV DIV, добавив атрибут Draggable Ondrag события слушателя события на элемент, как в примере ниже;
{ todos.map(todo =>this.onDrag(event, todo)} > {todo.task}) }
Draggable, как сказал ранее, включает в себя элемент, который добавляется, чтобы перетаскиваться по мере необходимости, когда ondrag в качестве слушателя событий вызывает метод ondrag при запуске.
onDrag = (event, todo) => {
event.preventDefault();
this.setState({
draggedTask: todo
});
}
Выше метод Ondrag принимает объект события и перетаскивающую Todo в качестве параметров всякий раз, когда он называется, и хранит TODO в состоянии компонента в качестве перетаскивания.
Далее мы заставляем dead div выглядеть так;
this.onDrop(event)} onDragOver={(event => this.onDragOver(event))} className="done" > ...
После этого в нашем компоненте будут добавлены следующие методы
onDragOver = (event) => {
event.preventDefault();
}
onDrop = (event ) => {
const { completedTasks, draggedTask, todos } = this.state;
this.setState({
completedTasks: [...completedTasks, draggedTask],
todos: todos.filter(task => task.taskID !== draggedTask.taskID),
draggedTask: {},
});
}
С этим, когда элемент выпускается или упал на целевой режим div, метод OnDrop уволен вежливостью прослушивателя события, добавленного ранее.
Какой этот метод просто делает ранее сохраненную задачу в состоянии, добавьте его в список завершенных нажатий, фильтрует список TODOS, чтобы удалить этот элемент, поскольку он был перемещен, а затем назначает первоначально установить драгущету на пустой объект.
NB: Все это сделано в под названном методе setState.
Спасибо за чтение. Ссылка на полный код можно найти https://github.com/torkpe/dragndrop/blob/master/src/app.js.