dnd kit
@dnd-kit
useDraggable и useDroppable . и не заставит вас перепроектировать ваше приложение или создать дополнительные узлы DOM-оболочки.@dnd-kit/sortable — тонкий слой, построенный поверх @dnd-kit/core . В будущем появятся дополнительные пресеты. Чтобы узнать, как начать работу с dnd kit , посетите официальный сайт документации. Вы найдете подробную документацию по API, советы и руководства, которые помогут вам создавать интерфейсы перетаскивания.
Основная библиотека набора dnd раскрывает две основные концепции:
Дополняйте существующие компоненты с помощью хуков useDraggable и useDroppable или комбинируйте оба для создания компонентов, которые можно как перетаскивать, так и опускать.
Обрабатывайте события и настраивайте поведение перетаскиваемых элементов и областей с помощью поставщика <DndContext> . Настройте датчики для обработки различных методов ввода.
Используйте компонент <DragOverlay> для визуализации перетаскиваемого наложения, которое удаляется из обычного потока документа и позиционируется относительно области просмотра.
Ознакомьтесь с нашим кратким руководством, чтобы узнать, как начать.
Расширяемость лежит в основе dnd kit . Он создан, чтобы быть компактным и расширяемым. Он поставляется с функциями, которые, по нашему мнению, будут нужны большинству людей большую часть времени, и предоставляет точки расширения для построения остальных поверх @dnd-kit/core .
Ярким примером уровня расширяемости набора dnd является набор настроек Sortable, который создан с использованием точек расширения, предоставляемых @dnd-kit/core .
Основными точками расширения комплекта dnd являются:
Создать доступные интерфейсы перетаскивания сложно; dnd kit имеет ряд разумных значений по умолчанию и отправных точек, которые помогут вам сделать интерфейс перетаскивания доступным:
aria , которые следует передавать перетаскиваемым элементам.Ознакомьтесь с нашим руководством по специальным возможностям, чтобы узнать больше о том, как вы можете улучшить работу программ чтения с экрана.
В отличие от большинства библиотек перетаскивания, dnd kit намеренно не создается поверх API перетаскивания HTML5. Это было осознанное архитектурное решение, которое сопряжено с компромиссами, о которых вам следует знать, прежде чем принять решение об его использовании, но мы считаем, что для большинства приложений преимущества перевешивают компромиссы.
API HTML5 Drag and drop имеет некоторые серьезные ограничения . Он не поддерживает сенсорные устройства или использование клавиатуры для перетаскивания элементов, а это означает, что библиотеки, построенные на его основе, должны предоставлять совершенно другую реализацию для поддержки этих методов ввода. Он также не поддерживает распространенные варианты использования, такие как блокировка перетаскивания к определенной оси или границам контейнера, пользовательские стратегии обнаружения столкновений или даже настройка предварительного просмотра перетаскиваемого элемента.
Хотя существуют обходные пути для некоторых из этих проблем, эти обходные пути обычно увеличивают сложность кодовой базы и общий размер пакета библиотеки, а также приводят к несогласованности между уровнями мыши, сенсорного экрана и клавиатуры, поскольку они основаны на совершенно разных реализациях.
Основной компромисс при отказе от использования API перетаскивания HTML5 заключается в том, что вы не сможете перетаскивать данные с рабочего стола или между окнами. Если вариант использования перетаскивания, который вы имеете в виду, включает в себя такую функциональность, вам определенно захочется использовать библиотеку, построенную на основе API перетаскивания HTML 5. Мы настоятельно рекомендуем вам проверить реакцию-dnd для библиотеки React, которая имеет собственный механизм перетаскивания HTML 5.
Комплект dnd позволяет создавать интерфейсы перетаскивания без необходимости изменять DOM каждый раз, когда элементу необходимо сменить положение.
Это возможно, потому что dnd kit лениво вычисляет и сохраняет начальные позиции и расположение ваших сбрасываемых контейнеров при запуске операции перетаскивания. Эти позиции передаются вашим компонентам, которые используют useDraggable и useDroppable , чтобы вы могли вычислять новые позиции ваших элементов во время операции перетаскивания и перемещать их в новые позиции, используя производительные свойства CSS, которые не вызывают перерисовку, например translate3d и scale . В качестве примера того, как этого можно достичь, ознакомьтесь с реализацией стратегий сортировки, предоставляемых библиотекой @dnd-kit/sortable .
Это не значит, что вы не можете менять положение элементов в DOM во время перетаскивания, это поддерживается , а иногда и неизбежно. В некоторых случаях невозможно заранее узнать, какова новая позиция и макет элемента, пока вы не переместите его в DOM. Просто знайте, что такого рода изменения в DOM при перетаскивании обходятся намного дороже и приведут к перерисовке, поэтому, если возможно, предпочитайте вычислять новые позиции с помощью translate3d и scale .
Комплект dnd также использует прослушиватели SyntheticEvent для событий активатора всех датчиков, что приводит к повышению производительности по сравнению с добавлением прослушивателей событий вручную к каждому отдельному перетаскиваемому узлу.
@dnd-kit@dnd-kit/core@dnd-kit/accessibility@dnd-kit/sortable@dnd-kit/modifiers@dnd-kit/utilities Вам нужно будет установить все зависимости в корневой каталог. Поскольку @dnd-kit представляет собой монорепозиторий, использующий рабочие пространства Lerna и Yarn, интерфейс командной строки npm не поддерживается (только Yarn).
yarn installЭто установит все зависимости в каждом проекте, соберет их и создаст символическую ссылку на них через Lerna.
В одном терминале параллельно запустите yarn start :
yarn start При этом каждый пакет создается в <packages>/<package>/dist и запускает проект в режиме просмотра, поэтому любые изменения, сохраненные внутри <packages>/<package>/src вызывают пересборку в <packages>/<package>/dist . Результаты будут переданы на терминал.
yarn start:storybookЗапускает сборник рассказов. Откройте http://localhost:6006, чтобы просмотреть его в браузере.
Вы можете играть с местными пакетами на игровой площадке Parcel.
yarn start:playground Это запустит игровую площадку на localhost:1234 . Если у вас lerna запускает часы в параллельном режиме на одном терминале, а затем вы запускаете пакет, ваша игровая площадка будет перезагружаться при внесении изменений в любой импортированный модуль, исходный код которого находится внутри packages/*/src/* . Обратите внимание, что для этого команда start каждого пакета передает TDSX флаг --noClean . Это предотвращает разрыв Parcel между перестройками из-за ошибок «Файл не найден».
Важный совет по безопасности: при добавлении/изменении пакетов на игровой площадке используйте объект alias в package.json. Это заставит Parcel разрешить их в файловой системе вместо того, чтобы пытаться установить пакет из NPM. Он также исправляет повторяющиеся ошибки React, с которыми вы можете столкнуться.
(В третьем терминале) вы можете запустить Cypress, и он выполнит интеграционные тесты для сборника рассказов.
