Тимур Хазамов

Спустившийся с гор инженер-программист

СКБ Контур

Кратко о моем опыте с DnD

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
    }).disableSelection();
  } );
  </script>

Ожидание

срок выполнения - 1 месяц

  • Взять библиотечку из npm
  • Запилить фичи
  • Забыть про задачу и заняться
    серьезными делами

Реальность

спустя 6 месяцев

  • Это тормозит
  • Это вешает браузер
  • Это не работает
  • А это вообще все ломает
  • ...
  • Никогда в жизни не браться
    за задачу с драг-н-дропом

React DnD

Почему react-dnd?

  • Разработал Ден Абрамов
  • Не было альтернатив
  • Разработал Ден Абрамов

Почему react-dnd?

  • Разработал Ден Абрамов
  • Нет альтернатив
  • Разработал Ден Абрамов

Что это за зверь такой?

DragDropContext

DropTarget

DragSource

DropTarget

DragSource

DragSource

DragSource

DragDropContext

DropTarget

DragSource

DropTarget

DragSource

DragSource

DragSource

Advanced Feature - DragLayer

DragDropContext

  • Это интерфейс
  • Не поставляется вместе с библиотекой
  • Нужен для возможности использования разного api
    • HTML5 DnD
    • Touch Api
    • Test

DropTarget

  • High-order component
  • Обрабатывает drop и hover элементов над ним
  • Знает о типах элементов, которые могут быть перетащены на него
  • Регистрирует перетаскивания только этих типов
  • High-order component
  • Делает элемент draggable
  • Имеет определенный тип
  • Регистрирует начало и конец перетаскивания и состояние isDragging
  • Может быть вложен в другой DragSource

DragSource

Задача 1

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

DropTarget

MapIcon

MapIcon

NewMapIcon

Cats rules the world

Cats are smartest animals ever

You are a stupid kitten for a cat

Cats or dogs? That is a question

Задача 2

DropTarget

DropTarget

DragSource/DropTarget

DragSource/DropTarget

DragSource/DropTarget

DragSource/DropTarget

DragSource/DropTarget

DropTarget

DropTarget

DragSource/DropTarget

DragSource/DropTarget

DragSource/DropTarget

SomeImage

DragSource/DropTarget

DropTarget

DropTarget

DragSource/DropTarget

DragSource

DragSource/DropTarget

DragSource/DropTarget

Placeholder

SomeImage

Мои проблемы

Много кода в методах компонент

const moveItem = (
    state: State,
    sourceItemId: string,
    sourceListId: string
    targetPosition: number,
    targetListId: string
): State => compose(
  placeItem(sourceItemId, targetListId, targetPosition),
  removeItem(sourceListId, sourceItemId)
)(state)

Отсутствие тестов

Буквально жил на страничке документации

Создавайте абстракции

Пишите высокоуровневые компоненты

react-beautiful-dnd

В итоге

  • Библиотека низкоуровневая
    • Обширное и сложное апи
  • Придется писать много кода
    • очень много
  • Лучше сразу написать несколько высокоуровневых компонент для типовых ситуаций
    • Сортировка вертикального списка
    • Перемещение элементов на карте
  • По возможности делать фичи использующие DnD в последнюю очередь
    • многие задачи можно решить и кнопочками

В итоге

  • Выделяйте изменения стейта в отдельные функции
  • Пишите высокоуровневые компоненты
  • Пишите тесты

Спасибо за внимание!

React DnD

By t1mmaas

React DnD

  • 1,545