Drag n Drop с помощью React-Beautiful-DND


ПЕРЕТАСКИВАНИЕ С ПОМОЩЬЮ РЕАКТ

Существует множество библиотек React, которые помогают создавать компоненты реакта Drag and Drop.

В этом блоге мы будем использовать библиотеку react под названием react-beautiful-dnd для создания компонентов DND. React-Beautiful-DND — это одна из самых удобных и простых в использовании библиотек реакта Drag and Drop (DND), разработанная создателем JIRA Алексом Рирдоном.

React-Beautiful-DND

Краткое введение

В библиотеке React-Beautiful-DND компоненты DND создаются с помощью 3 основных компонентов

  • <DragDropContext/> => определяет область для всей операции drag n drop

  • <Droppable/> => определяет область, в которой могут быть сброшены перетаскиваемые элементы

  • <Draggable/>=> определяет реальный элемент, который можно перетаскивать и сбрасывать в области Droppable

«Каждый DragDropContext может иметь несколько Droppables и каждый Droppables может иметь несколько Draggables, определенных внутри них.»

Установка библиотеки BRD

npm i react-beautiful-dnd

Создайте DragDropContext

Мы импортируем DragDropContext из библиотеки react-beautiful-dnd и обернем все приложение в этот контекст. Это обернет два других компонента, компоненты Droppable и Draggable BRD. Существуют такие реквизиты, как onDragStart, onDragUpdate и onDragEnd, но onDragEnd более чем достаточно для выполнения переупорядочивания, добавления и удаления элементов.

import "./styles.css";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { useState } from "react";
Вход в полноэкранный режим Выход из полноэкранного режима
 <div className="App">
      <DragDropContext onDragEnd={onDragEnd}>
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              {fruitItems.map((item, index) => (
                    <div key={item.id} >
                      {item.Title}
                    </div>
              ))}
              {provided.placeholder}
            </div>
          )}
      </DragDropContext>
    </div>
Вход в полноэкранный режим Выход из полноэкранного режима

Создание Droppable и Draggable

импортируем Droppable и Draggable из библиотеки react-beautiful-dnd. Draggagle должен быть вложен внутрь Droppable, а Droppable должен быть вложен внутрь DragDropContext.

Droppable определяет выпадающую область, куда можно перетаскивать элементы. Каждый компонент droppable будет иметь уникальный параметр droppableId. Компонент Droppable предоставляет переменные, такие как :

  • provided.innerRef: переменная ссылки react для манипулирования элементами DOM.

  • provided.droppableProps: предоставляет стили CSS по умолчанию для функциональности перетаскивания

  • provided.placeholder: предоставляет дополнительное место в области Droppable для элемента, который в данный момент перетаскивается.

  • snapshot: snapshot.isDraggingOver можно использовать для получения состояния перетаскивания для применения условной CSS стилизации.

**Draggable **определяет реальный элемент, который необходимо перетащить. Он должен быть вложен внутрь компонента Droppable. Мы должны предоставить значения для

  • draggableId для уникальной идентификации перетаскиваемых элементов.

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

Модифицированный App.js после добавления Droppable и Draggable

import "./styles.css";
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
import { useState } from "react";

export default function App() {
  const [fruitItems, setFruitItems] = useState([
    { id: "1", Title: "Apple" },
    { id: "2", Title: "Mango" },
    { id: "3", Title: "Peach" },
    { id: "4", Title: "Grapes" },
    { id: "5", Title: "BlueBerry" },
    { id: "6", Title: "StrawBerry" }
  ]);

  const onDragEnd = (result) => {
    const newItems = Array.from(fruitItems);
    const [removed] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, removed);
    setFruitItems(newItems);
  };

  const grid = 8;

  const getItemStyle = (isDragging, draggableStyle) => ({
    // some basic styles to make the items look a bit nicer
    userSelect: "none",
    padding: grid * 2,
    margin: `0 0 ${grid}px 0`,

    // change background colour if dragging
    background: isDragging ? "lightgreen" : "lightblue",

    // styles we need to apply on draggables
    ...draggableStyle
  });

  const getListStyle = (isDraggingOver) => ({
    background: isDraggingOver ? "lightblue" : "grey",
    padding: grid,
    width: 250
  });
  return (
    <div className="App">
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="droppable">
          {(provided, snapshot) => (
            <div
              ref={provided.innerRef}
              style={getListStyle(snapshot.isDraggingOver)}
            >
              {fruitItems.map((item, index) => (
                <Draggable key={item.id} draggableId={item.id} index={index}>
                  {(provided, snapshot) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={getItemStyle(
                        snapshot.isDragging,
                        provided.draggableProps.style
                      )}
                    >
                      {item.Title}
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

Вход в полноэкранный режим Выход из полноэкранного режима

Тестирование

Вот код в CodeSandbox
React-Beautiful-dnd

Оцените статью
devanswers.ru
Добавить комментарий