react-beautiful-dnd

Красивый и доступный drag and drop разработанный с помощью библиотеки React

Если есть желание - поиграйте с примерами!!

Основные характеристики

• Красивое и естественное движение элементов 💐
• Доступность: мощная поддержка клавиатуры и программ экранного доступа ♿️
• Чрезвычайная производительность 🚀
• Чистое и мощное 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

• Перетаскивание мышью 🐭
• Перетаскивание тачем 👉📱
• Перетаскивание клавиатурой 🎹♿️

API 🏋️‍

• <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 в момент передвижения - ⚠️ Продвинутый уровень

Паттерны 👷‍

• Мульти драг
• Таблицы
• Используя порталы (ReactDOM.createPortal)

Поддержка 👩‍⚕️

• Разработка
• Сообщество и аддоны
• Информация о релизах и логи изменений
• Обновления
• План
• Медиа

Читать документацию на других языках 🌎

• English
• 한글/Korean
• 中文/Chinese

Автор ✍️

Alex Reardon @alexandereardon

Контрибьюторы 🤝

• Bogdan Chadkin @IAmTrySound
• Luke Batchelor @alukebatchelor
• Jared Crowe @jaredjcrowe
• Many other @Atlassian's!