- Красивое и естественное движение элементов 💐
- Доступность: мощная поддержка клавиатуры и программ экранного доступа ♿️
- Чрезвычайная производительность 🚀
- Чистое и мощное API, с которым легко начать работу
- Прекрасно взаимодействое с бразуером
- Дополнительное стилизование необязательно
- Нет необходимости создавать лишние обертки - отлично взаимодействует с flexbox и focus.
Мы создали бесплатный курс на egghead.io 🥚 чтобы помочь вам начать работу с react-beautiful-dnd как можно быстрее.
- Вертикальные списки ↕
- Горизонтальные списки ↔
- Передвижение между списками (▤ ↔ ▤)
- Объединение элементов
- Поддержка мыши 🐭, клавиатуры 🎹♿️ и тач скрина 👉📱 (на мобильном, планшетном и других устройствах)
- Поддержка multi grag
- Невероятная поддержка программ экранного доступа ♿️ - мы предлагаем удивительный опыт для английских программ экрамного доступа прямо из коробки 📦. Мы также предоставляем полный контроль настройки и поддержку интернационализации для тех, кто в ней нуждается 💖
- Перетаскивание по условию и сброс по условию
- Несколько независимых списков на одной странице
- Гибкие размеры элементов списка - двигаемые элементы могут иметь разную высоту (вертикальные списки) и ширину (горизонтальные списки)
- Возможность добавлять и удалять элементы во время движения
- Совместимость с семантическим упорядочиванием
<table>- табличный паттерн - Авто скроллинг - возможность автоматически скроллить контейнер и даже окно, если необходимо (даже с помощью клавиатуры 🔥)
- Кастомное управление передвижением - возможность передвигать целый элемент, управляя лишь его частью
- Совместимость с
ReactDOM.createPortal- паттерн порталов - 🌲 Поддержка дерева с помощью пакета
@atlaskit/tree <Droppable />список может быть контейнером с прокруткой (без прокручиваемого родителя) или быть дочерним по отношению к контейнеру с прокруткой (у которого также нет прокручиваемого родителя)- Независимые вложенные списки - список может быть дочерним по отношению к другому списку, но вы не можете перетаскивать элементы из родительского списка в дочерний список
- Поддержка рендеринг на стороне сервера (Server side rendering (SSR)) - смотрите resetServerContext()
- Прекрасно работает с вложенными интерактивными элементами по-умолчанию
react-beautiful-dnd разработан для создания красивых перетаскиваний элементов списка/списков. Их может использовать любой, даже люди, у которых проблемы со зрением. Для получения большей информации и мотивации по использованию проекта вы можете взглянуть на внешние ресурсы:
- 📖 Переосмысления перетаскивания (drag and drop)
- 🎧 React подкаст: быстрый, доступный и красивый drag and drop
Существует огромное количество библиотек, которые позволяют реализовать перетаскивание (drag and drop) с помощью React. Наиболее примечательным является удивительный react-dnd. React-dnd выполняет невероятную работу по предоставлению большого набора примитивов перетаскивания, которые хорошо совместимы и хорошо работают с дико несовместимой функцией перетаскивания в html5. react-beautiful-dnd - это абстракция более высокого уровня специально созданная для списков (вертикальных, горизонтальных, передвижения между списков, вложенных списков и так далее). В рамках вышеприведенного подмножества, react-beatiful-dnd предлагает мощное, естественное и красивое перетаскивание drag and drop. Тем не менее, эта библиотека не обеспечивает широту функциональных возможностей, предлагаемых react-dnd. Таким образом react-beatiful-dnd может вам не подойти - все зависит от ваших целей его использования.
Способы, с помощью которых можно использовать drag and drop
<DragDropContext />- Оборачивает ту часть вашего приложения, где вы хотите применить drag and drop<Droppable />- Область в которую необходимо реализовать перетаскивание. Содержит<Draggable /><Draggable />- То, что будете двигать и переноситьresetServerContext()- Утилита для серверного рендеринга (SSR)
<DragDropContext />-onDragStart,onDragUpdate,onDragEndиonBeforeDragStart- Комбинация
<Draggable />s - Общие возможные проблемы с настройкой
- Используя
innerRef - Предупреждения для разработчика и как их отключить
- Правила для
draggableIdиdroppableIds - Кастомизация и пропуск анимации "отбрасывания"
- Авто-скроллинг
- Контроль скрин программ экранного доступа
- Использование html5
doctype TypeScriptиflow- Dragging
<svg> - Неочевидные предустановленные стили
- Как мы обнаруживаем скролл-контейнеры
- Как мы используем события dom - Полезно, если вы решили построить что-то поверх
react-beautiful-dnd - Добавление
<Draggable />s в момент передвижения -⚠️ Продвинутый уровень
English
한글/Korean
中文/ChineseAlex Reardon @alexandereardon
- Bogdan Chadkin @IAmTrySound
- Luke Batchelor @alukebatchelor
- Jared Crowe @jaredjcrowe
- Many other @Atlassian's!
