JarCasting
JarCasting JarCasting

react-beautiful-dnd

WebJar for react-beautiful-dnd

Лицензия

Лицензия
Категории

Категории

React Взаимодействие с пользователем Веб-фреймворки
Группа

Группа

org.webjars.npm
Идентификатор

Идентификатор

react-beautiful-dnd
Последняя версия

Последняя версия

13.0.0
Дата

Дата
Тип

Тип

jar
Описание

Описание

react-beautiful-dnd
WebJar for react-beautiful-dnd
Ссылка на сайт

Ссылка на сайт

https://www.webjars.org
Система контроля версий

Система контроля версий

https://github.com/atlassian/react-beautiful-dnd

Скачать react-beautiful-dnd

Имя Файла Размер
react-beautiful-dnd-13.0.0.pom
react-beautiful-dnd-13.0.0.jar 409 KB
react-beautiful-dnd-13.0.0-sources.jar 22 bytes
react-beautiful-dnd-13.0.0-javadoc.jar 22 bytes
Обзор

Как подключить последнюю версию

<!-- https://jarcasting.com/artifacts/org.webjars.npm/react-beautiful-dnd/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>react-beautiful-dnd</artifactId>
    <version>13.0.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/react-beautiful-dnd/
implementation 'org.webjars.npm:react-beautiful-dnd:13.0.0'
// https://jarcasting.com/artifacts/org.webjars.npm/react-beautiful-dnd/
implementation ("org.webjars.npm:react-beautiful-dnd:13.0.0")
'org.webjars.npm:react-beautiful-dnd:jar:13.0.0'
<dependency org="org.webjars.npm" name="react-beautiful-dnd" rev="13.0.0">
  <artifact name="react-beautiful-dnd" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='react-beautiful-dnd', version='13.0.0')
)
libraryDependencies += "org.webjars.npm" % "react-beautiful-dnd" % "13.0.0"
[org.webjars.npm/react-beautiful-dnd "13.0.0"]

Зависимости

compile (7)

Идентификатор библиотеки Тип Версия
org.webjars.npm : css-box-model jar [1.2.0,2)
org.webjars.npm : use-memo-one jar [1.1.1,2)
org.webjars.npm : babel__runtime jar [7.8.4,8)
org.webjars.npm : raf-schd jar [4.0.2,5)
org.webjars.npm : redux jar [4.0.4,5)
org.webjars.npm : react-redux jar [7.1.1,8)
org.webjars.npm : memoize-one jar [5.1.1,6)

Модули Проекта

Данный проект не имеет модулей.

react beautiful dnd logo

react-beautiful-dnd (rbd)

Beautiful and accessible drag and drop for lists with React

CircleCI branch npm

quote application example

Play with this example if you want!

Core characteristics

  • Beautiful and natural movement of items 💐
  • Accessible: powerful keyboard and screen reader support ♿️
  • Extremely performant 🚀
  • Clean and powerful api which is simple to get started with
  • Plays extremely well with standard browser interactions
  • Unopinionated styling
  • No creation of additional wrapper dom nodes - flexbox and focus management friendly!

Get started 👩‍🏫

We have created a free course on egghead.io 🥚 to help you get started with react-beautiful-dnd as quickly as possible.

course-logo

Currently supported feature set ✅

  • Vertical lists ↕
  • Horizontal lists ↔
  • Movement between lists (▤ ↔ ▤)
  • Virtual list support 👾 - unlocking 10,000 items @ 60fps
  • Combining items
  • Mouse 🐭 , keyboard 🎹 ♿️ and touch 👉 📱 (mobile, tablet and so on) support
  • Multi drag support
  • Incredible screen reader support ♿️ - we provide an amazing experience for english screen readers out of the box 📦 . We also provide complete customisation control and internationalisation support for those who need it 💖
  • Conditional dragging and conditional dropping
  • Multiple independent lists on the one page
  • Flexible item sizes - the draggable items can have different heights (vertical lists) or widths (horizontal lists)
  • Add and remove items during a drag
  • Compatible with semantic <table> reordering - table pattern
  • Auto scrolling - automatically scroll containers and the window as required during a drag (even with keyboard 🔥 )
  • Custom drag handles - you can drag a whole item by just a part of it
  • Able to move the dragging item to another element while dragging (clone, portal) - Reparenting your <Draggable />
  • Create scripted drag and drop experiences 🎮
  • Allows extensions to support for any input type you like 🕹
  • 🌲 Tree support through the @atlaskit/tree package
  • A <Droppable /> list can be a scroll container (without a scrollable parent) or be the child of a scroll container (that also does not have a scrollable parent)
  • Independent nested lists - a list can be a child of another list, but you cannot drag items from the parent list into a child list
  • Server side rendering (SSR) compatible - see resetServerContext()
  • Plays well with nested interactive elements by default

Motivation 🤔

react-beautiful-dnd exists to create beautiful drag and drop for lists that anyone can use - even people who cannot see. For a good overview of the history and motivations of the project you can take a look at these external resources:

Not for everyone ✌️

There are a lot of libraries out there that allow for drag and drop interactions within React. Most notable of these is the amazing react-dnd. It does an incredible job at providing a great set of drag and drop primitives which work especially well with the wildly inconsistent html5 drag and drop feature. react-beautiful-dnd is a higher level abstraction specifically built for lists (vertical, horizontal, movement between lists, nested lists and so on). Within that subset of functionality react-beautiful-dnd offers a powerful, natural and beautiful drag and drop experience. However, it does not provide the breadth of functionality offered by react-dnd. So react-beautiful-dnd might not be for you depending on what your use case is.

Documentation 📖

About 👋

Sensors 🔉

The ways in which somebody can start and control a drag

API 🏋 ️‍

diagram

Guides 🗺

Patterns 👷‍

Support 👩‍⚕️

Read this in other languages 🌎

Author ✍️

Alex Reardon @alexandereardon

Collaborators 🤝

org.webjars.npm

Atlassian

Версии библиотеки

Версия
13.0.0
13.0.0-beta.1
11.0.4
3.0.0