Мне всегда нравилась функция перетаскивания на веб-страницах. Я думаю, что это дает забавный уровень интерактивности, улучшающий пользовательский опыт. В моем путешествии по изучению веб-разработки, хотя это и не было моей основной целью, я хотел потратить несколько часов на изучение некоторых базовых функций перетаскивания в React.
Мой сокурсник по Flatiron School посоветовал мне попробовать react-sortable-hoc как простой способ погрузиться в предмет. Эта библиотека предоставляет два компонента React более высокого порядка, SortableContainer и SortableElement, которые, наряду с несколькими функциями, позволяют легко перетаскивать и сортировать. Хотя функция response-sortable-hoc немного ограничена, она послужила хорошим введением в перетаскивание, и я смог интегрировать его в один из моих проектов в Flatiron School. В этом сообщении в блоге я рассмотрю очень простую реализацию его функций.
В каталоге проекта React выполните в терминале следующую команду, чтобы установить библиотеку: npm install react-sortable-hoc --save
После этой установки у вас будет доступ к функциям react-sortable-hoc и компонентам более высокого порядка. Для этой простой демонстрации в компоненте App в моем проекте React я добавил свойство images в состояние приложения и установил его в массив, содержащий четыре URL-адреса изображений, которые я бы использовал для перетаскивания.
Приложение отображает компонент, который я назвал ImgContainer, который получает массив изображений из состояния приложения в качестве свойств, а также ссылку на функцию, называемую onSortEnd. onSortEnd принимает в качестве аргумента объект с двумя ключами, oldIndex и newIndex. Эти ключи относятся к индексу изображения перед запуском события сортировки и индексу позиции, в которой изображение было отброшено.
Эта функция вызывается, как вы уже догадались, в конце события перетаскивания. Он вызвал this.setState и устанавливает свойство images состояния приложения, равное результату вызова одной из встроенных функций react-sortable-hoc, называемой arrayMove.
arrayMove принимает три аргумента: текущее состояние сортируемых элементов, старый индекс и новый индекс. Затем он выполняет переупорядочение изображений за вас, чтобы по завершении события перетаскивания сортируемые элементы оставались в том порядке, в котором вы их оставили.
Я скоро расскажу, как работает упомянутый выше компонент ImgContainer, а пока вот код для приложения:
Здесь в игру вступает компонент высшего порядка react-sortable-hoc. Первый из них называется SortableContainer и, как следует из его названия, является элементом контейнера для сортируемых элементов или контекстом для перетаскиваемых и отбрасываемых компонентов.
Компонент ImgContainer, отображаемый в приложении, представляет собой просто константу, установленную в значение SortableContainer, которая сопоставляет массив изображений, переданный в качестве свойств, и для каждого изображения в массиве отображает компонент, который я назвал SortableImageContainer. Он получает в качестве свойств изображение, а также индекс изображения (второй аргумент функции карты JavaScript. Индекс - это то, что будет использоваться в функции onSortEnd для сброса порядка изображений.
Вот код для компонента ImgContainer:
SortableImageContainer - простой компонент. Это просто константа, равная значению компонента SortableElement react-sortable-hoc, который я использую только для рендеринга компонента Image, которым будет само изображение.
Краткое замечание о моих рассуждениях: компоненты SortableElement и SortableContainer от react-sortable-hoc являются функциональными, то есть они не хранят состояние (по крайней мере, насколько мне известно). Чтобы сортируемый элемент или сортируемый контейнер сохранял состояние, SortableElement и / или SortableContainer должны просто отображать другой компонент класса, который может удерживать состояние. Таким образом, SortableElement и SortableContainer просто становятся оболочками для других ваших компонентов, давая им возможность перетаскивания, отбрасывания и сортировки, а также позволяя вашим компонентам делать свои собственные вещи.
Вот код моего компонента SortableImageContainer:
Просто чтобы протестировать обработку изменений состояния компонентов, отображаемых компонентами response-sortable-hoc, я дал компонентам Image красную границу, установленную на скрытую, onMouseOver вызывает this.setState для отображения границы, а onMouseOut вызывает this.setState, чтобы скрыть снова граница. В противном случае он просто отображает изображение, которое теперь можно перетаскивать и сортировать, поскольку оно заключено в компоненты более высокого порядка react-sortable-hoc.
Вот код для компонента изображения:
А вот пример в действии:
Вот и все! Довольно просто и быстро в реализации.
