Super simple drag-n-drop library for react developers
tldr; There is no fancy thing in this library compares to others. I just find myself difficult to understand react-dnd and react-beautiful-dnd. They are both amazing with plenty of features and supports. I need a library that allows me to apply drag-n-drop quickly and with my customization, if there is any error, I won't spend too much time to understand the library. So I wrote this library. It's basically using a cloned DOM for moving affect and improving the speed by caching all the boundaries in rbush tree.
Demo
https://aiwsolutions.github.io/react-drag-drop/
Local Demo
npm install
npm run serve
then navigate to http://localhost:8080
Production
Usage
npm install --save aiws-react-dnd
Draggable
<Draggable
uniqueId={1}
onDragStart={f => f}
type="draggable"
>
{
handers =>
<div
{...handlers}
>
Draggable Content
</div>
}
</Draggable>
Property | Type | Description |
---|---|---|
uniqueId | any | (Required) The unique id for this Draggable element. It needs to be globally unique for the whole application (both Draggable & Droppable) because the library does cache the boundary of it, for performance improvement. |
handle | string | (Optional CSS selector) If exists, then the drag can only be started if the click was on the matched child element (inside the element). |
skip | string | (Optional CSS selector) If exists, the drag will be skipped if the click was on this matched element. |
type | string | (Required) The type of this element, this is for Droppable to accepts if it was overred. |
onDragStart | func | (Required) This function will be called before the dragging happens, it must returns a data for further communication with others Draggable/Droppable otherwise the drag action is discarded. |
onDrag | func | (Optional) This function will be called on every movement. Returns false to discard the movement. |
onDrop | func | (Optional) This function will be called on releasing mouse. |
onPressed | func | (Optional) If there is no movement, this function will be called when there are mouse down and up. |
onRendered | func | (Optional) This function will be called on componentDidUpdate, componentDidMount of the element and on dragging. |
onUnmount | func | (Optional) This function will be called on componentWillUnmount of the element. |
Droppable
<Droppable
uniqueId='a'
onDraggedSourceOverred={handleAddItemToThis}
>
{
hovered =>
<div
style={{
hovered ? '1px 1px 2px 1px rgba(0,0,0,0.4)' : 'none',
}}
>
Container
</div>
}
</Droppable>
Property | Type | Description |
---|---|---|
uniqueId | any | (Required) The unique id for this Draggable element. It needs to be globally unique for the whole application (both Draggable & Droppable) because the library does cache the boundary of it, for performance improvement. |
acceptTypes | array of string | (Optional) List of types of Draggable that this Droppable will accept. If not provided or empty array, then all types will be accepted |
onDraggedSourceOverred | func | (Optional) This function will be called when there is a matched type (acceptTypes) of Draggable was dragged on this element. Return a non-false value to accept the element. |
onDraggedSourceOuted | func | (Optional) This function will be called if its child element was dragged out of itself. |
onRendered | func | (Optional) This function will be called on componentDidUpdate, componentDidMount of the element. |
onUnmount | func | (Optional) This function will be called on componentWillUnmount of the element. |
Notice
This library is scallable when using with aiws-elm. MIT