Одна из лучших библиотек для создания возможностей перетаскивания.
Раньше для реализации функции перетаскивания в React использовался вариант React-DnD. Эта библиотека была широко рекомендована разработчиками React из-за ее надежных функций и простоты использования.
Однако теперь в городе появился новый игрок, предлагающий еще более мощное, лучшее и простое в освоении решение: Dnd Kit.
Хотя важно признать, что React-DnD по-прежнему является хорошей библиотекой, Dnd Kit предлагает ряд преимуществ, которые делают его привлекательной альтернативой.
Например, с точки зрения функциональности Dnd Kit предлагает ряд улучшений по сравнению с React-DnD. Он мощнее, эффективнее и обеспечивает лучший пользовательский опыт. Тем не менее, отдельные разработчики должны сами решать, какая библиотека лучше всего подходит для их нужд.
Если вы спросите меня, я предпочитаю Dnd Kit и использую его чаще всего, поэтому я пишу этот пост, чтобы вы тоже были знакомы.
Пожалуйста, имейте в виду, что я следовал официальной документации, поэтому код выглядит идентично. Но я сделал все возможное, чтобы объяснить концепцию как можно проще.
Кроме того, в будущем будет серия постов, в которых я объясню некоторые сложные примеры, так что следите за мной, чтобы получать обновления, когда я опубликую следующий пост.
Теперь пойдем дальше.
Почему Dnd Kit?
Согласно официальному веб-сайту, Dnd Kit — это легкий, модульный, производительный, доступный и расширяемый инструментарий перетаскивания для React.
Это упрощает перетаскивание компонентов.
Говоря о том, что вы можете создать, существует буквально множество примеров. Вот некоторые из лучших:
1. Канбан-доска
2. Игра в шашки
3. Карточная игра
Круто, правда?
Точно так же вы можете реализовать любую возможность перетаскивания по своему усмотрению.
Итак, давайте углубимся и воспользуемся Dnd Kit.
Использование Dnd Kit в вашем приложении React
Во-первых, мы должны установить Dnd Kit.
И довольно легко установить Dnd Kit внутри вашего проекта React.
1. Установка
Сначала вам нужно создать приложение React с помощью стандартной команды.
npx create-react-app appname
И тогда вы можете установить пакет Dnd Kit. Для этого вам просто нужно установить основную библиотеку, которая состоит из большинства основных функций, которые вам нужны.
Итак, в вашем приложении React выполните следующую команду.
npm install @dnd-kit/core
Есть еще несколько пакетов Dnd Kit, то есть модификатор и сортируемый, которые мы будем использовать в следующем посте.
2. Поймите основы Dnd Kit
Во-первых, позвольте мне объяснить некоторые фундаментальные концепции библиотеки Dnd Kit.
Прежде чем использовать Dnd Kit, вы должны быть знакомы с ref в React. Если вы не знаете, здесь есть документация для этого.
Теперь пойдем дальше.
Чтобы использовать библиотеку Dnd Kit, вам необходимо определить два компонента: компонент Draggable и компонент Droppable.
Компонент Draggable — это элемент, который можно перетаскивать, а компонент Droppable — место, куда можно перетащить компонент Draggable.
Наконец, чтобы обеспечить взаимодействие между компонентами Draggable и Droppable, оба компонента должны быть помещены внутрь компонента DndContext, который действует как родительский компонент.
Таким образом, компонент DndContext может управлять взаимодействием между двумя компонентами и предоставлять централизованное место для обработки функций перетаскивания.
Вот пример кода о том, что я объяснил.
import React from 'react';
import {DndContext} from '@dnd-kit/core';
import {Draggable} from './Draggable';
import {Droppable} from './Droppable';
function App() {
return (
<DndContext>
<Draggable />
<Droppable />
</DndContext>
)
}
Не волнуйтесь, если приведенный выше код не имеет смысла; мы подробно рассмотрим это позже. Просто помните, что у нас есть родительский компонент DndContext и два дополнительных компонента внутри него.
3. Пример перетаскивания
Теперь вы поняли некоторые основные концепции Dnd Kit, давайте рассмотрим простой пример.
Перед этим позвольте мне показать вам, что мы создаем.
Здесь левый столбец состоит из компонента Draggable, а правый столбец состоит из компонента Droppable.
Итак, давайте создадим эти два компонента.
- Создание перетаскиваемого компонента
Создайте новое имя файла Draggable.jsx в папке src вашего приложения React и вставьте приведенный ниже код.
import React from 'react';
import { useDraggable } from '@dnd-kit/core';
export function Draggable(props) {
const { attributes, listeners, setNodeRef, transform } = useDraggable({
id: 'draggable',
});
const style = transform ? {
transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
} : undefined;
return (
<button ref={setNodeRef} style={style} {...listeners} {...attributes}>
{props.children}
</button>
);
}
Здесь мы определили компонент React с именем Draggable, который реализует функциональность перетаскиваемого элемента с использованием библиотеки Dnd Kit. Код импортирует хук useDraggable из библиотеки @dnd-kit/core, который используется для обеспечения функции перетаскивания для компонента.
Затем мы использовали хук useDraggable, который возвращает объект, содержащий несколько свойств, которые используются для реализации функции перетаскивания.
Объект содержит следующие свойства:
- атрибуты: объект, содержащий HTML-атрибуты, необходимые для перетаскивания компонента.
- слушатели: объект, содержащий прослушиватели событий, которые запускаются, когда пользователь перетаскивает компонент.
setNodeRef: функция, которая используется для установки ссылки на узел DOM компонента.- transform: объект, который содержит текущее перемещение компонента по осям x и y в пикселях.
Компонент «Draggable» использует свойство «transform», чтобы применить перевод к компоненту. Это делается путем создания объекта «стиль», содержащего перевод, и применения его к компоненту с использованием свойства «стиль».
Наконец, мы определили элемент кнопки, который использует свойство «ref» для установки ссылки на узел DOM с помощью функции «setNodeRef» из хука «useDraggable». Объекты «слушатели» и «атрибуты» из хука распространяются на компонент с использованием синтаксиса «…слушателей» и «…атрибутов» соответственно.
Надеюсь, ты понял.
- Определение удаляемого компонента
Теперь создайте новое имя файла Droppable.jsx в папке src вашего приложения React и вставьте приведенный ниже код.
import React from 'react';
import { useDroppable } from '@dnd-kit/core';
export function Droppable(props) {
const { isOver, setNodeRef } = useDroppable({
id: 'droppable',
});
const style = {
color: isOver ? 'blue' : undefined,
};
return (
<div ref={setNodeRef} style={style}>
{props.children}
</div>
);
}
Здесь хук useDroppable возвращает объект, содержащий два свойства:
isOver: логическое значение, указывающее, находится ли перетаскиваемый компонент в данный момент над перетаскиваемым компонентом.setNodeRef: функция, которая используется для установки ссылки на узел DOM компонента.
Тогда код прост, если перетаскиваемый компонент находится над перетаскиваемым компонентом, тогда isOver будет истинным, и из-за этого будет применен синий цвет.
- Определение родительского компонента
Помните, мы должны создать родительский компонент, который принимает эти два компонента.
Итак, теперь давайте создадим это.
import React, { useState } from 'react';
import { DndContext } from '@dnd-kit/core';
import './App.css'
import { Droppable } from './Droppable';
import { Draggable } from './Draggable';
function App() {
const [isDropped, setIsDropped] = useState(false);
const draggableMarkup = (
<Draggable >
<div className='drag_item'>
Drag me
</div>
</Draggable>
);
return (
<DndContext onDragEnd={handleDragEnd}>
<div className='section'>
<div className='draggable'>
{!isDropped ? draggableMarkup : null}
</div>
<div className='draggable'>
<Droppable>
{isDropped ? draggableMarkup : 'Drop here'}
</Droppable>
</div>
</div>
</DndContext>
);
function handleDragEnd(event) {
if (event.over && event.over.id === 'droppable') {
setIsDropped(true);
}
}
}
export default App;
Здесь, в компоненте приложения, мы определили переменную состояния isDropped, которая отслеживает, был ли перетаскиваемый элемент перемещен в область перетаскивания.
Проще говоря, у нас есть условия либо для отображения перетаскиваемого элемента, либо для сообщения, указывающего, куда этот элемент можно перетащить.
В основной функции рендеринга код возвращает компонент DndContext с функцией обратного вызова handleDragEnd, переданной в качестве реквизита. Обратный вызов будет вызван, когда действие перетаскивания будет завершено. Затем у нас есть два div с классом «перетаскиваемый» (для применения одних и тех же стилей).
Первый div имеет компонент draggableMarkup в качестве дочернего элемента, но только если isDropped равен false. Второй элемент div имеет дочерний компонент Droppable. Если isDropped равно true, будет отображаться компонент draggableMarkup, в противном случае будет отображаться текст «Перетащите сюда».
Наконец, функция handleDragEnd проверяет, существует ли свойство event.over и является ли id объекта event.over «удаляемым». Если это так, он обновляет состояние, вызывая setIsDropped(true).
- Добавьте стили в свое приложение для реагирования
Наконец, нам нужно применить стили к нашему приложению React. Для этого вы можете использовать любой CSS-фреймворк, но я просто создам новый файл App.css в папке src и добавлю в него приведенный ниже код.
.section {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: rgb(37, 148, 251);
}
.draggable {
display: flex;
align-items: center;
justify-content: center;
width: 20rem;
height: 20rem;
background-color: #9749FF;
margin-right: 10px;
color: white;
}
.drag_item {
padding: 5px 10px;
width: 8rem;
height: auto;
color: black;
background-color: white;
}
Вот и все, теперь вы можете запустить приложение и увидеть результат.
Надеюсь, вам понравится.
Вот так — спасибо.
Кроме того, в будущем будет серия постов о Dnd Kit, так что обязательно подписывайтесь на меня.
Рассмотрите возможность стать участником Medium, если вам нравится читать подобные истории и вы хотите помочь мне как писателю. Это стоит 5 долларов в месяц и дает вам неограниченный доступ к контенту Medium. Я получу небольшую комиссию, если вы зарегистрируетесь по моей ссылке.
