🚀 Drag-and-Drop в React: простое руководство Функционал drag-and-drop часто используется для организации элементов, перемещения файлов и других интерактивных действий. Сегодня разберём, как его реализовать в React с минимальными усилиями! 🔹 Основные шаги для реализации 1. Добавление событий перетаскивания В HTML5 есть встроенные события для drag-and-drop: - onDragStart — инициирует перетаскивание. - onDragOver — позволяет элементу быть зоной для сброса. - onDrop — срабатывает при отпускании элемента. 2. Создание базового компонента Вот пример, где мы добавляем элемент для перетаскивания и область для сброса.

import React, { useState } from 'react';

const DragAndDrop = () => {
  const [droppedItem, setDroppedItem] = useState('');

  const handleDragStart = (e, data) => {
    e.dataTransfer.setData('text/plain', data);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    const data = e.dataTransfer.getData('text/plain');
    setDroppedItem(data);
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  return (
    <div>
      <div
        draggable
        onDragStart={(e) => handleDragStart(e, 'Перетащено!')}
        style={{ width: '150px', padding: '10px', backgroundColor: '#f0f0f0', cursor: 'grab', marginBottom: '20px' }}
      >
        Перетащи меня!
      </div>

      <div
        onDrop={handleDrop}
        onDragOver={handleDragOver}
        style={{ width: '200px', height: '100px', backgroundColor: '#e0e0e0' }}
      >
        Брось сюда!
      </div>

      {droppedItem && <p>Результат: {droppedItem}</p>}
    </div>
  );
};

export default DragAndDrop;

🔹 Объяснение 1. `draggable` Устанавливает элемент как "перетаскиваемый". 2. `dataTransfer` Используется для передачи данных между событиями onDragStart и onDrop. 3. `onDragOver` Предотвращает поведение по умолчанию, чтобы позволить сброс элемента. 4. Стилизация Добавляем визуальные подсказки, чтобы пользователю было понятно, где можно сбрасывать объект. 🔹 Использование библиотеки `react-dnd` Для более сложных сценариев, таких как перетаскивание списков или взаимодействие с несколькими элементами, можно использовать библиотеку react-dnd. Установка:

npm install react-dnd react-dnd-html5-backend

Пример использования:

import React from 'react';
import { DndProvider, useDrag, useDrop } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const ItemType = 'BOX';

const DraggableItem = ({ id }) => {
  const [, dragRef] = useDrag(() => ({
    type: ItemType,
    item: { id },
  }));

  return (
    <div ref={dragRef} style={{ padding: '10px', backgroundColor: '#f0f0f0', marginBottom: '10px', cursor: 'grab' }}>
      Элемент {id}
    </div>
  );
};

const DropZone = ({ onDrop }) => {
  const [, dropRef] = useDrop(() => ({
    accept: ItemType,
    drop: (item) => onDrop(item.id),
  }));

  return (
    <div
      ref={dropRef}
      style={{ width: '200px', height: '100px', backgroundColor: '#e0e0e0' }}
    >
      Брось сюда!
    </div>
  );
};

const DragAndDropExample = () => {
  const handleDrop = (id) => {
    alert(`Вы перетащили элемент ${id}`);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <DraggableItem id={1} />
      <DraggableItem id={2} />
      <DropZone onDrop={handleDrop} />
    </DndProvider>
  );
};

export default DragAndDropExample;

🔹 Преимущества использования `react-dnd` - Удобная работа с множеством элементов. - Поддержка сложных сценариев (например, перетаскивание между списками). - Расширенные возможности кастомизации поведения. 🎯 Заключение React упрощает реализацию drag-and-drop благодаря событиям HTML5, а для сложных задач можно использовать мощные библиотеки вроде react-dnd ReactJs Daily | #begginers