https://github.com/zaibot/react-dnd
D&D with freedom
https://github.com/zaibot/react-dnd
Last synced: 3 months ago
JSON representation
D&D with freedom
- Host: GitHub
- URL: https://github.com/zaibot/react-dnd
- Owner: Zaibot
- Created: 2018-06-07T15:45:30.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2020-11-18T15:06:26.000Z (over 4 years ago)
- Last Synced: 2025-01-11T16:40:13.775Z (5 months ago)
- Language: TypeScript
- Homepage: https://zaibot.github.io/react-dnd/
- Size: 3.15 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# @zaibot/react-dnd
[Demo / Documentation](https://zaibot.github.io/react-dnd/)
## Terminology
| Name | Meaning |
| - | - |
| Draggable | Container used for cloned image |
| Dragging | Cloned image |
| Drag Container Props | Positioning props for cloned image |
| Drag Handle Props | Event props for drag handle |
| Drop Props | Event props for dropping container |
| Tracking | Container used for calculating positioning |
| Container | HTML element of/wrapping your content |
| Handle | Specific actionable part within a draggable |
| Key | Information used to identify the information to be dragged |
| Data | The data object to be received during a drop |
| Meta | Additional information related to action of dragging |
## Usage
Required root for information sharing
```js
import { DraggingProvider } from '@zaibot/react-dnd';
ReactDOM.render(
...
)
```
Drop area
```js
import { Droppable } from '@zaibot/react-dnd';
const DropArea = () => (
{ ... }}>
{({ dropProps, trackingProps }) => (
...
)}
)
```
Draggable
```js
import { Droppable } from '@zaibot/react-dnd';
const DragMe = () => (
{({ isDragged, dragContainerProps, dragHandleProps, trackingProps, dragging }) => (
{dragging}Drag me
)}
)
```
Re-order Area
```js
import { Draggable, Droppable, PositionContainer, PositionPublisher } from '@zaibot/react-dnd';
const DropArea = () => (
{({ ref, registries }) => (
{ ... }}>
{({ dropProps, trackingProps }) => (
...
)}
)}
)
const DragMe = () => (
{({ refContainer }) => (
{({ isDragged, dragContainerProps, dragHandleProps, trackingProps, dragging }) => (
{dragging}Drag me
)}
)}
)
```
## Resources
https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API