ПЕРЕТАСКИВАНИЕ С ПОМОЩЬЮ РЕАКТ
Существует множество библиотек React, которые помогают создавать компоненты реакта Drag and Drop.
В этом блоге мы будем использовать библиотеку react под названием react-beautiful-dnd для создания компонентов DND. React-Beautiful-DND — это одна из самых удобных и простых в использовании библиотек реакта Drag and Drop (DND), разработанная создателем JIRA Алексом Рирдоном.
React-Beautiful-DND
Краткое введение
В библиотеке React-Beautiful-DND компоненты DND создаются с помощью 3 основных компонентов
-
<DragDropContext/>=> определяет область для всей операции drag n drop -
<Droppable/>=> определяет область, в которой могут быть сброшены перетаскиваемые элементы -
<Draggable/>=> определяет реальный элемент, который можно перетаскивать и сбрасывать в области Droppable
«Каждый DragDropContext может иметь несколько Droppables и каждый Droppables может иметь несколько Draggables, определенных внутри них.»
Установка библиотеки BRD
npm i react-beautiful-dnd
Создайте DragDropContext
Мы импортируем DragDropContext из библиотеки react-beautiful-dnd и обернем все приложение в этот контекст. Это обернет два других компонента, компоненты Droppable и Draggable BRD. Существуют такие реквизиты, как onDragStart, onDragUpdate и onDragEnd, но onDragEnd более чем достаточно для выполнения переупорядочивания, добавления и удаления элементов.
import "./styles.css";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { useState } from "react";
<div className="App">
<DragDropContext onDragEnd={onDragEnd}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
{fruitItems.map((item, index) => (
<div key={item.id} >
{item.Title}
</div>
))}
{provided.placeholder}
</div>
)}
</DragDropContext>
</div>
Создание Droppable и Draggable
импортируем Droppable и Draggable из библиотеки react-beautiful-dnd. Draggagle должен быть вложен внутрь Droppable, а Droppable должен быть вложен внутрь DragDropContext.
Droppable определяет выпадающую область, куда можно перетаскивать элементы. Каждый компонент droppable будет иметь уникальный параметр droppableId. Компонент Droppable предоставляет переменные, такие как :
-
provided.innerRef: переменная ссылки react для манипулирования элементами DOM. -
provided.droppableProps: предоставляет стили CSS по умолчанию для функциональности перетаскивания -
provided.placeholder: предоставляет дополнительное место в области Droppable для элемента, который в данный момент перетаскивается. -
snapshot: snapshot.isDraggingOver можно использовать для получения состояния перетаскивания для применения условной CSS стилизации.
**Draggable **определяет реальный элемент, который необходимо перетащить. Он должен быть вложен внутрь компонента Droppable. Мы должны предоставить значения для
-
draggableIdдля уникальной идентификации перетаскиваемых элементов. -
index: для идентификации данных в списке, которые в данный момент перетаскиваются в источнике, и в пункте назначения для идентификации данных в списке, ниже которых должен быть помещен перетаскиваемый элемент.
Модифицированный App.js после добавления Droppable и Draggable
import "./styles.css";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { useState } from "react";
export default function App() {
const [fruitItems, setFruitItems] = useState([
{ id: "1", Title: "Apple" },
{ id: "2", Title: "Mango" },
{ id: "3", Title: "Peach" },
{ id: "4", Title: "Grapes" },
{ id: "5", Title: "BlueBerry" },
{ id: "6", Title: "StrawBerry" }
]);
const onDragEnd = (result) => {
const newItems = Array.from(fruitItems);
const [removed] = newItems.splice(result.source.index, 1);
newItems.splice(result.destination.index, 0, removed);
setFruitItems(newItems);
};
const grid = 8;
const getItemStyle = (isDragging, draggableStyle) => ({
// some basic styles to make the items look a bit nicer
userSelect: "none",
padding: grid * 2,
margin: `0 0 ${grid}px 0`,
// change background colour if dragging
background: isDragging ? "lightgreen" : "lightblue",
// styles we need to apply on draggables
...draggableStyle
});
const getListStyle = (isDraggingOver) => ({
background: isDraggingOver ? "lightblue" : "grey",
padding: grid,
width: 250
});
return (
<div className="App">
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
>
{fruitItems.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
{item.Title}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
</div>
);
}
Тестирование
Вот код в CodeSandbox
React-Beautiful-dnd