react-dnd-drop
It's a drag and drop react component with designated drop area(s).
It enables you to place an item on a drop-area. It works with the DOM (touch-enabled).
This is not a sort. It's a fancy multiple-selection thingy.
Install
yarn add react-dnd-drop
# npm install react-dnd-drop --save
Usage
import DnD from 'react-dnd-drop'; // hypotethical itemsitems = id: 0 text: 'item 1' id: 1 text: 'item 2' // handle drop { /** * dropAreas = [ 0 ] // index of dropAreas * item */ console } // add ref to your drop area<div =></div> // items to drag<div>items</div>
DnD Properties
Name | Default | Desc |
---|---|---|
getDropAreas | null | Function , should return an array of drop areas |
onDrop | null | Function , will be executed when an item is dropped within a dropArea'a bound |
overlayStyle | object | Object , a custom styling for overlay. overaly is used to track mouse movement |
copyStyle | object | Object , a custom styling for item's copy: The one we are dragging on mouseDown |
How it works
Every item gets a copy, which style can be overriden with copyStyle
, it will be overriden like this:
opacity:08 position:'fixed' zIndex:'3001' cursor:'grabbing' ...copyStyle || {} display: dragging ? 'inline-block' : 'none' width height top left
on mouseDown
, mouse movement (or touch movement) gets tracked by the overlay, which style can be ovverriden with overlayStyle
:
backgroundColor:'transparent' position:'fixed' top:0 left:0 width:'100%' height:'100%' zIndex:'3000' cursor:'grabbing' ...overlayStyle || {} display: dragging ? 'block' : 'none'
on mouseUp
(or touchEnd
), intersections will be calculated between the copy and the dropAreas. If there is an intersection,
onDrop
will be executed:
onDrop( indexes_of_intersected_dropareas )
...
Cheers,