Использование перетаскивания в React

Использование перетаскивания в React

От автора: в этом посте я объясню основы использования библиотеки с открытым исходным кодом react-dnd (версия 14.0.2 на данный момент) и покажу несколько актуальных примеров кода.

Подготовка

Установите библиотеки react-dnd и react-dnd-html5-backend с помощью npm/yarn.

Оберните компонент-контейнер (тот, который отображает компоненты с помощью перетаскивания) DndProvider следующим образом:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Нам необходимо предоставить react-dnd бэкэнд, который инкапсулирует фактическое использование drag-and-drop API в браузере.

В основном вам понадобится только HTML5Backend для начинающих, хотя можно использовать другие drag-and-drop бэкэнды (например, touch для мобильных устройств).

Пример №1 — Перетаскивание элементов в единую область

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

Хотя это не то требование, которое я имел в виду, я быстро понял, что это самое основное и легко объяснимое для новичков в DND. Вот почему я счел важным объяснить это:

Использование перетаскивания в React

Drag

Это код для компонента PetCard (перетаскиваемого элемента):

Давайте рассмотрим этот пример. Чтобы любой элемент React можно было перетаскивать, нам нужно установить ему свойство ref, которое будет возвращать dragRef из хука useDrag (который мы импортировали из react-dnd).
Это важная часть того, как мы обеспечиваем библиотеку элементом, который нужно перетащить.

useDrag получает входной объект. Объект должен включать обязательное свойство type — строку, которую мы определяем. Позже это станет актуальным, когда мы создадим область перетаскивания (чтобы принять тип перетаскивания).

Следующее свойство — item. Мы используем его для передачи данных, которые нам понадобятся позже для области перетаскивания. Нам нужны только необходимые данные для визуализации представления элемента в области перетаскивания (в данном случае это объект Pet: id и name).

Затем у нас есть необязательное свойство с именем collect. Это полезно для многих целей. Это функция, которая получает объект monitor, предоставленный нам react-dnd, который содержит состояние и метаданные действия перетаскивания.

В нашем случае мы используем его для извлечения isDragging — логического значения, которое мы можем использовать для рендеринга симпатичного смайлика на перетаскиваемой карте. Для получения полной информации об API monitor я рекомендую ознакомиться с документацией.

Drop

Это код компонента Basket (область перетаскивания):

Прежде всего, нам нужен useState чтобы сохранить массив элементов, брошенных в область перетаскивания (корзину). Мы сопоставляем каждый объект Pet в корзине с элементом PetCard, который будет отображаться внутри корзины.

Вдобавок, как и раньше, чтобы сказать react-dnd, что элемент является областью перетаскивания, нам нужно снабдить его свойством ref. На этот раз dropRef возвращается из хука useDrop (в нашем примере это второй div, который мы рендерим внизу).

Хук useDrop получает объект с обязательным свойством accept, соответствующее свойство type мы передаем в useDrag заранее. Область перетаскивания будет реагировать только на перетаскивание этого типа.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Тогда у нас есть свойство drop. Это функция обратного вызова, которая срабатывает при каждом нажатии. Она получает данные, которые мы передали в свойстве item от useDrag. В нашем примере мы берем данные Pet и добавляем их в массив basket (только если его еще нет). Обратите внимание, что мы не изменяем массив basket. Мы возвращаем его новый экземпляр с добавленным элементом Pet.

Наконец, у нас есть еще одна функция collect, аналогичная той, которую мы использовали раньше. На этот раз мы используем ее для извлечения логического значения isOver, которое указывает, находится ли перетаскиваемый элемент в настоящее время над нашей областью перетаскивания. С его помощью мы визуализируем уведомление «Drop Here» внутри.

Пример # 2 — Перетаскивание элементов списка и изменения их порядка

Этот пример немного сложнее. Но на этот раз это действительно соответствует требованию, которое я имел в виду при изучении данной библиотеки:

Использование перетаскивания в React

Обратите внимание на то, что каждый элемент списка является одновременно перетаскиваемым и местом размещения. Это очень важно, потому что это означает, что каждый компонент элемента должен реализовывать useDrag и useDrop хуки, и объединять их в один ref. Это код для ListItem:

Этот компонент получает следующие свойства:

text — Текст, отображаемый элементом списка.

index — Индекс элемента в списке.

moveListItem — Обратный вызов, который будет выполняться, когда нам нужно, чтобы этот элемент переместился в другой индекс (что происходит, когда мы проводим курсор мимо него, как показано на гифке).

Для useDragу нас в тот же входной объект, что и в первом примере, только на этот раз данные, которые мы передаем (свойство item), являются просто индексом.

Интересная часть — это входной объект, который мы передаем в useDrop. В частности – функция hover. Функция hover срабатывает каждый раз, когда перетаскиваемость парит над зоной падения. Мы используем ее в примере, чтобы перемещать элементы вверх и вниз, когда перетаскиваемый курсор перемещается вокруг элементов списка, всегда оставляя место для бросания элемента.

Реализация может показаться сложной на первый взгляд, но все, что она делает, это перемещает элемент вверх или вниз, когда курсор мыши выходит за среднюю ось Y элемента (как видно на гифке выше).

Затем все, что осталось, — это объединить две ссылки в одну и отрендерить элемент так, как нам заблагорассудится. Это код для компонента List, который отображает все элементы списка:

По большей части это просто контейнер, и мы не делаем здесь никаких вещей, связанных с DND. Единственное, что стоит упомянуть, — это обратный вызов movePetListItem, который мы передаем ListItem. Он получает два индекса и меняет позицию элемента в массиве pets с одного на другой (с dragIndex на hoverIndex).

Еще примеры

Есть еще много вариантов использования drag-and-drop, которые могут вас заинтересовать, но я не буду упоминать о них здесь. Вы можете найти много примеров и реализаций в коде и документации react-dnd.

Резюме

Я решил написать этот пост после того, как узнал, что пользоваться библиотекой react-dnd оказалось не так просто, как я ожидал вначале. Я надеюсь, что с помощью этого поста я облегчил вам задачу самостоятельно заняться изучением этой библиотеки.

Автор: Liad Shiran

Источник: medium.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.