Вы когда-нибудь хотели добавить функцию перетаскивания в свои компоненты React? Это не так сложно, как вы думаете.
Перетаскивание — это способ перемещения элементов на экране или управления ими с помощью мыши или сенсорной панели. Он идеально подходит для изменения списка элементов или перемещения элементов из одного списка в другой. Проверять Как создать ReactOS Live на USB-накопителе или компакт-диске.
Вы можете создавать компоненты перетаскивания в React, используя любой из двух методов: встроенные функции или сторонний модуль.
Различные способы реализации перетаскивания в React
Есть два способа реализовать перетаскивание в React: использовать встроенные функции React или использовать сторонний модуль. Начните с создания приложения React, затем выберите предпочтительный метод.
Способ XNUMX: используйте встроенные функции
В React вы можете использовать событие onDrag, чтобы отслеживать, когда пользователь перетаскивает элемент, и есть событие onDrop, чтобы отслеживать, когда он был перетащен. Вы также можете использовать события onDragStart и onDragEnd для отслеживания начала и окончания перетаскивания.
Чтобы сделать элемент перетаскиваемым, вы можете установить для атрибута draggable значение true. Например:
import React, { Component } from ‘react’;
class MyComponent extends Component {
render() {
return (
<div
draggable
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragEnd={this.handleDragEnd}
>
Drag me!
</div>
);
}
}
export default MyComponent; Чтобы сделать элемент выпадающим, вы можете создать методы handleDragStart, handleDrag и handleDragEnd. Эти методы будут работать и тогда, когда пользователь перетаскивает элемент. Например:
import React, { Component } from ‘react’;
class MyComponent extends Component {
handleDragStart(event) {
// This method runs when the dragging starts
console.log(“Started”)
}
handleDrag(event) {
// This method runs when the component is being dragged
console.log(“Dragging…”)
}
handleDragEnd(event) {
// This method runs when the dragging stops
console.log(“Ended”)
}
render() {
return (
<div
draggable
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragEnd={this.handleDragEnd}
>
Drag me!
</div>
);
}
}
export default MyComponent; В приведенном выше коде есть три способа обработки перетаскивания элемента: handleDragStart, handleDrag и handleDragEnd. Div имеет атрибут draggable и устанавливает свойства onDragStart, onDrag и onDragEnd в соответствующие функции.
Когда элемент перетаскивается, сначала будет запущен метод handleDragStart. Здесь вы можете выполнить любую настройку, например, подготовить данные для передачи.
Затем метод handleDrag запускается рекурсивно во время перетаскивания элемента. Здесь вы можете вносить любые обновления, такие как настройка положения элемента.
Наконец, когда элемент отбрасывается, запускается метод handleDragEnd. Здесь вы можете выполнить любую очистку, которую вам нужно сделать, например, сбросить данные, которые вы передали.
Вы также можете перемещать компонент по экрану в onDragEnd(). Для этого вам нужно будет установить свойство стиля плагина. Например:
import React, { Component, useState } from ‘react’;
function MyComponent() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const handleDragEnd = (event) => {
setX(event.clientX);
setY(event.clientY);
};
return (
<div
draggable
onDragEnd={handleDragEnd}
style={{
position: “absolute”,
left: x,
top: y
}}
>
Drag me!
</div>
);
}
export default MyComponent; Код вызывает хук useState для отслеживания местоположения компонента x и y. Затем в методе handleDragEnd вы обновляете позиции x и y. Наконец, вы можете установить свойство стиля компонента, чтобы расположить его в новых позициях x и y. Проверять Лучшие блокчейн-приложения, созданные с помощью React Native.
Способ 2: использовать сторонний модуль
Если вы не хотите использовать встроенные функции React, вы можете использовать сторонний модуль, например, реагировать и перетаскивать. Этот модуль предоставляет специфичную для React оболочку API перетаскивания HTML5.
Чтобы использовать этот модуль, вам сначала нужно установить его с помощью npm:
npm install react-drag-and-drop — save
Затем вы можете использовать их в своих компонентах React:
import React, { Component } from ‘react’;
import { Draggable, Droppable } from ‘react-drag-and-drop’;
class MyComponent extends Component {
render() {
return (
<div>
<Draggable type=”foo” data=”bar”>
<div>Drag me!</div>
</Draggable>
<Droppable types={[‘foo’]} onDrop={this.handleDrop}>
<div>Drop here!</div>
</Droppable>
</div>
);
}
handleDrop(data, event) {
// This method runs when the data drops
console.log(data); // ‘bar’
}
}
export default MyComponent; Начните с импорта компонентов Draggable и Droppable из модуля реакции перетаскивания. Затем используйте эти компоненты для создания перетаскиваемого элемента и выпадающего элемента.
Перетаскиваемый компонент принимает свойство типа, указывающее тип данных, представляемых компонентом, и свойство данных, указывающее данные, которые необходимо передать. Обратите внимание, что тип — это пользовательское имя, которое вы можете выбрать для отслеживания любого компонента в многокомпонентном интерфейсе.
Компонент Droppable использует свойство types для указания типов данных, на которые его можно перетаскивать. У него также есть свойство onDrop, которое указывает функцию обратного вызова, которая будет запущена, когда на него перетащите компонент.
Когда вы перетаскиваете перетаскиваемый компонент на перетаскиваемый диск, срабатывает метод handleDrop. Здесь вы можете делать любые манипуляции с данными.
Советы по созданию простых в использовании компонентов DnD
Есть несколько вещей, которые вы можете сделать, чтобы сделать перетаскиваемые компоненты более удобными для пользователя.
Во-первых, должна быть обеспечена визуальная обратная связь, когда элемент извлечен. Например, вы можете изменить непрозрачность элемента или добавить границу. Чтобы добавить визуальные эффекты, вы можете использовать обычный CSS или Tailwind CSS в своем приложении React.
Во-вторых, вам нужно убедиться, что пользователи могут перетаскивать элемент только в допустимую цель перетаскивания. Например, вы можете добавить к элементу атрибут types, который определяет типы компонентов, которые он будет принимать.
В-третьих, пользователю должен быть предоставлен метод отмены операции перетаскивания. Например, вы можете добавить кнопку, позволяющую пользователю отменить операцию. Проверять Лучшие бесплатные инструменты для создания и разработки игр без опыта программирования.
Улучшенный пользовательский интерфейс с перетаскиванием
Перетаскивание не только помогает улучшить взаимодействие с пользователем, но также может повысить общую производительность вашего веб-приложения. Теперь пользователь может легко изменить порядок некоторых данных, не обновляя страницу и не выполняя несколько шагов.
Вы также можете добавить другие анимации в свое приложение React, чтобы сделать перетаскивание более интерактивным и простым в использовании. Вы можете просмотреть сейчас Как настроить мышь для комфортного использования.
