Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию.

Вы когда-нибудь хотели добавить функцию перетаскивания в свои компоненты React? Это не так сложно, как вы думаете.

Перетаскивание — это способ перемещения или управления элементами на экране с помощью мыши или сенсорной панели. Он идеально подходит для изменения порядка элементов в списке или перемещения элементов из одного списка в другой.

Вы можете создавать компоненты перетаскивания в React, используя любой из двух методов: встроенные функции или сторонний модуль.

Различные способы реализации перетаскивания в React

Есть два способа реализовать перетаскивание в React: с помощью встроенных функций React или с помощью стороннего модуля. Начать с создание React-приложения, затем выберите предпочтительный метод.

Способ 1: использование встроенных функций

В React вы можете использовать событие onDrag, чтобы отслеживать, когда пользователь перетаскивает элемент, и событие onDrop, чтобы отслеживать, когда он его бросает. Вы также можете использовать события onDragStart и onDragEnd для отслеживания начала и окончания перетаскивания.

instagram viewer

Чтобы сделать элемент перетаскиваемым, вы можете установить для атрибута draggable значение true. Например:

Импортировать Реагировать, {Компонент} от 'реагировать';
сортМой КомпонентрасширяетКомпонент{
 оказывать() {
возвращаться (
<див
 перетаскиваемый
 onDragStart={этот.handleDragStart}
 при перетаскивании = {этот.handleDrag}
 onDragEnd={этот.handleDragEnd}
>
 Перетащите меня!
</div>
 );
 }
}
экспортпо умолчанию Мой Компонент;

Чтобы сделать элемент доступным для удаления, вы можете создать методы handleDragStart, handleDrag и handleDragEnd. Эти методы будут выполняться, когда пользователь перетаскивает элемент и когда он его бросает. Например:

Импортировать Реагировать, {Компонент} от 'реагировать';
сортМой КомпонентрасширяетКомпонент{
 handleDragStart (событие) {
// Этот метод запускается, когда начинается перетаскивание
 console.log("Начал")
 }


handleDrag (событие) {
// Этот метод запускается, когда компонент перетаскивается
 console.log("Перетаскивание...")
 }


handleDragEnd (событие) {
// Этот метод запускается, когда перетаскивание прекращается
 console.log("Завершено")
 }


оказывать() {
возвращаться (
<див
 перетаскиваемый
 onDragStart={этот.handleDragStart}
 при перетаскивании = {этот.handleDrag}
 onDragEnd={этот.handleDragEnd}
>
 Перетащите меня!
</div>
 );
 }
}
экспортпо умолчанию Мой Компонент;

В приведенном выше коде есть три метода для обработки перетаскивания элемента: handleDragStart, handleDrag и handleDragEnd. Div имеет атрибут draggable и устанавливает свойства onDragStart, onDrag и onDragEnd в соответствующие функции.

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

Затем метод handleDrag запускается несколько раз, пока вы перетаскиваете элемент. Здесь вы можете делать любые обновления, такие как настройка положения элемента.

Наконец, когда вы отбрасываете элемент, запускается метод handleDragEnd. Здесь вы можете выполнить любую необходимую очистку, например, сбросить данные, которые вы передали.

Вы также можете перемещать компонент по экрану в onDragEnd(). Для этого вам нужно будет установить свойство стиля компонента. Например:

Импортировать Реагировать, {Компонент, useState} от 'реагировать';
функцияМой Компонент() {
константа [x, setX] = useState(0);
константа [y, setY] = useState(0);


константа handleDragEnd = (событие) => {
установитьX(событие.clientX);
установитьY(событие.clientY);
 };


возвращаться (
<див
 перетаскиваемый
 onDragEnd={handleDragEnd}
 стиль = {{
 позиция: "абсолютный",
 слева: х,
 сверху: у
 }}
>
 Перетащите меня!
</div>
 );
}
экспортпо умолчанию Мой Компонент;

Код вызывает хук useState для отслеживания координат x и y компонента. Затем в методе handleDragEnd обновляются координаты x и y. Наконец, вы можете установить свойство стиля компонента, чтобы расположить его в новых позициях x и y.

Способ 2: использование стороннего модуля

Если вы не хотите использовать встроенные функции React, вы можете использовать сторонний модуль, например реагировать перетаскиванием. Этот модуль предоставляет специфичную для React оболочку API перетаскивания HTML5.

Чтобы использовать этот модуль, вам сначала нужно установить его с помощью npm:

нпм установить реагировать-перетащить-и-уронить--сохранять

Затем вы можете использовать его в своих компонентах React:

Импортировать Реагировать, {Компонент} от 'реагировать';
Импортировать { Перетаскиваемый, сбрасываемый } от «реагировать на перетаскивание»;
сортМой КомпонентрасширяетКомпонент{
 оказывать() {
возвращаться (
<див>
<Перетаскиваемый тип ="фу" данные ="бар">
<див>Перетащите меня!</div>
</Draggable>


<Выпадающие типы={['фу']} onDrop={this.handleDrop}>
<див>Бросьте сюда!</div>
</Droppable>
</div>
 );
 }


handleDrop (данные, событие) {
// Этот метод запускается при удалении данных
консоль.log (данные); // 'бар'
 }
}
экспортпо умолчанию Мой Компонент;

Начните с импорта компонентов Draggable и Droppable из модуля react-drag-and-drop. Затем используйте эти компоненты для создания перетаскиваемого элемента и выпадающего элемента.

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

Компонент Droppable использует реквизит типов, чтобы указать типы данных, которые вы можете перетаскивать на него. Он также имеет свойство onDrop, которое указывает функцию обратного вызова, которая будет выполняться, когда вы перетаскиваете на него компонент.

Когда вы перетаскиваете перетаскиваемый компонент на droppable, запускается метод handleDrop. Здесь вы можете выполнить любую обработку, которую вам нужно сделать с данными.

Советы по созданию удобных для пользователя компонентов DnD

Есть несколько вещей, которые вы можете сделать, чтобы сделать ваши перетаскиваемые компоненты более удобными для пользователя.

Во-первых, вы должны обеспечить визуальную обратную связь при перетаскивании элемента. Например, вы можете изменить непрозрачность элемента или добавить границу. Для добавления визуальных эффектов вы можете использовать обычный CSS или CSS tailwind в вашем приложении React.

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

В-третьих, вы должны предоставить пользователю возможность отменить операцию перетаскивания. Например, вы можете добавить кнопку, позволяющую пользователю отменить операцию.

Улучшите взаимодействие с пользователем с помощью перетаскивания

Функция перетаскивания не только помогает улучшить взаимодействие с пользователем, но также может повысить общую производительность вашего веб-приложения. Теперь пользователь может легко изменить порядок некоторых данных, не обновляя страницу и не выполняя несколько шагов.

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