@zaibot/react-dnd

Demo / Documentation

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

import { DraggingProvider } from '@zaibot/react-dnd';

ReactDOM.render(
    <DraggingProvider>
        <div>
            ...
        </div>
    </DraggingProvider>
)

Drop area

import { Droppable } from '@zaibot/react-dnd';

const DropArea = () => (
    <Droppable onDropped={({ droppingPosition, droppingData }) => { ... }}>
        {({ dropProps, trackingProps }) => (
            <div {...dropProps} {...trackingProps}>
                ...
            </div>
        )}
    </Droppable>
)

Draggable

import { Droppable } from '@zaibot/react-dnd';

const DragMe = () => (
    <Draggable dataDrag={`item`}>
        {({ isDragged, dragContainerProps, dragHandleProps, trackingProps, dragging }) => (
            <div {...dragContainerProps} {...dragHandleProps} {...trackingProps}>{dragging}Drag me</div>
        )}
    </Draggable>
)

Re-order Area

import { Draggable, Droppable, PositionContainer, PositionPublisher } from '@zaibot/react-dnd';

const DropArea = () => (
    <PositionContainer>
        {({ ref, registries }) => (
            <Droppable refTracking={ref} onDropped={({ droppingPosition, droppingData }) => { ... }}>
                {({ dropProps, trackingProps }) => (
                    <div {...dropProps} {...trackingProps}>
                        ...
                    </div>
                )}
            </Droppable>
        )}
    </PositionContainer>
)

const DragMe = () => (
    <PositionPublisher keyData={`item`}>
        {({ refContainer }) => (
            <Draggable refTracking={refContainer} dataDrag={`item`}>
                {({ isDragged, dragContainerProps, dragHandleProps, trackingProps, dragging }) => (
                    <div {...dragContainerProps} {...dragHandleProps} {...trackingProps}>{dragging}Drag me</div>
                )}
            </Draggable>
        )}
    </PositionPublisher>
)

Resources

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API