react-dragndrop (ES2015)
Simplistic library with minimal boilerplate code to get started. This library comes with 2 React components: <Draggable>
and <DropTarget>
. In order for these two components to talk to each other, an instance of DragDropManager
must be created with the following code:
import {DragDropManager, Draggable, DropTarget} from 'react-dragndrop'
let manager = new DragDropManager()
render(){
return (
<div>
<Draggable manager={manager}>Drag me!</Draggable>
<DropTarget manager={manager}>Here!</DropTarget>
</div>
)
}
Draggable
Whatever it is you want dragged, nest it inside of the Draggable component. This wrapper allows for customization for every stage of the Draggable life cycle. Base style, clicked style, dragging style. Once the Draggable is actually dropped in the DropTarget, it is up to the user to style the component at that point.
Example:
<Draggable manager={manager}>I want this dragged!</Draggable>
PropTypes:
manager: React.PropTypes.instanceOf(DragDropManager).isRequired,
id: React.PropTypes.string,
draggingStyle: React.PropTypes.object,
clickedStyle: React.PropTypes.object,
style: React.PropTypes.object,
baseClassName: React.PropTypes.string,
clickedClassName: React.PropTypes.string,
draggingClassName: React.PropTypes.string,
droppedClassName: React.PropTypes.string,
handleMouseUp: React.PropTypes.func,
handleMouseDown: React.PropTypes.func,
handleDrop: React.PropTypes.func
DropTarget
This component allows multiple different types of children. It allows object, JSX, or a simple string to be nested within.
This component is how you listen to events.
Example:
<DropTarget manager={manager}>This text will be appended to with the Draggable text</DropTarget>
PropTypes:
manager: React.PropTypes.instanceOf(DragDropManager).isRequired,
style: React.PropTypes.object,
wrapper: React.PropTypes.any,
handleDraggableHoveringOverDropTarget: React.PropTypes.func,
handleDroppedDraggable: React.PropTypes.func