Рубрики
Без рубрики

Разработка канбанского совета с использованием React-DND

Демонстрация того, как использовать React-DND

Автор оригинала: Rethna.

Канбан

Перетаскивание является одним из крутых функций HTML5. Ранее мы полагались на события мыши JavaScript для достижения перетаскивания. Но HTML5 упростил рабочий поток. Но делать перетаскивание к работе в среде реагирования сложно. Поскольку может быть конфликт между управляющими DOM-манипуляциями и виртуальным домом, поддерживаемым реагированием. Именно здесь вступает в RAGE-DND, которая представляет собой простую, прямую прямую библиотеку, которая помогает нам работать с перетаскиванием HTML5 в среде реагирования.

Код, используемый в этом руководстве, доступен на https://gist.github.com/rethna2/c89a6e30dfc96296a1ddb6e1911a6bda.

Также вы можете проверить это на следующем CodeSandbox.

Для начала мы должны добавить две библиотеки.

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

$ npm install react-dnd react-dnd-html5-backend
  1. React-DND обеспечивает всю логику и
  2. React-DND-HTML5-Backend связывает логику к API HTML5.

Существует три узла DOM или компонент JSX для выполнения рабочего потока.

  1. Драгируемые объекты : В нашем примере канбанского совета каждый товар задач является объектом перегруженного. Предметы, которые мы можем перетащить.
  2. Контейнеры Drempable: Каждый столбец в канбанском доске является контейнером для переводов. Мы можем перетащить любой элемент задач и бросить их в этот контейнер
  3. Перетащите контекст: Обертка, которая заключает все объекты перетаскиваемых и сбрасываемых контейнеров. Это необходимо для установки границы и инициализации стадии. Можно иметь несколько перетаснений, имея несколько не совпадающих контекста.

Все эти три функция реализованы как компоненты высшего порядка, оборучающие вокруг компонентов вида.

import { DragDropContext, DropTarget, DragSource } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";

Доска представлена ниже структурой. Это может выглядеть немного сложным, но позвольте мне выделить некоторые очки.


{channels.map(channel => (
  
    

      
{labelsMap[channel]}

      

      {tasks.filter(item => item.status === channel)
        .map(item => (
          
            
{item.title}

          
      ))}
      

    

  
  ))}

У нас есть двухуровневый вложенный петлю DOM с использованием Array.map, первый рендеринг столбцов Kanban Rock и второй рендеринг задач. Также обратите внимание, что есть два компонента, которые я буду объяснить раньше. Но до того, как корневой компонент Kanban должен быть подключен к реакции React-DND, как ниже.

export default DragDropContext(HTML5Backend)(Kanban);

Chartpable контейнер

Компонент столбца «Kanban Board» представлен ниже.

const boxTarget = {
  drop(props) {
    return { name: props.status };
  }
};

class KanbanColumn extends React.Component {
  render() {
    return this.props.connectDropTarget(
      
{this.props.children}

    );
  }
}

KanbanColumn = DropTarget("kanbanItem", boxTarget, 
  (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    canDrop: monitor.canDrop()
  }))(KanbanColumn);

Boxtarget Объект имеет коллекцию событий, которые нас интересуют. Здесь нас интересуют только событие «Drop». После того, как событие Drop произойдет, мы говорим, что элемент задачи упал на конкретный столбец, который доступен в «ropps.Status»

Компонент Kanbancolumn не содержит UI, вместо этого он передается как дети.

Платежный предмет

const boxSource = {
  beginDrag(props) {
    return {
      name: props.id
    };
  },
  endDrag(props, monitor) {
    const item = monitor.getItem();
    const dropResult = monitor.getDropResult();
    if (dropResult) {
      props.onDrop(monitor.getItem().name, dropResult.name);
    }
  }
};

class KanbanItem extends React.Component {
  render() {
    return this.props.connectDragSource(
      
{this.props.children}

    );
  }
}

KanbanItem = DragSource("kanbanItem", boxSource, 
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  }))(KanbanItem);

Это похоже на предыдущий компонент, но у него есть что-то дополнительно.

Boxsource Объект – это коллекция слушателей, которые нас интересуют. На самом деле мы заинтересованы в двух событиях. Когда начнется перетаскивание, мы собираем идентификатор элемента, перетаскиваемого. И когда падение завершается, мы собираем имя колонны, на котором он упал.

Всякий раз, когда происходит перетаскивание, мы заинтересованы в двух информации. Что такое тянутся? А где товар упал? Как только у нас оба мы передаем его на родительский компонент ( Props.rongrop )

И это ответственность от родителей справиться с изменением состояния. В нашем примере мы используем библиотеку «Immutability-Helper». Но есть много способов справиться с этим.

И окончательная записка. Это работает нормально только на компьютерах, а не на сенсорных экранах, поскольку HTML5 Drag-and-Drop не является доступным на сенсорных устройствах. Но есть и другие бэкэнд-альтернативы, которые хорошо играют в React-DND.

Читайте ещё по теме: