react-simple-drag-and-drop
The best in the world drag and drop react component. Works only with es6/es7.
Motivation
Create simple and clear react component for drag and drop.
Some explanations:
parentNode property is the element, on which is positioned a draggable element
frozen is a boolean property which allows to disable grabbing
styles property receives only 4 style properties - "left", "top", "zIndex", "cursor". It applies specified styles only during first render. To apply styles after first render component must be frozen.
onDraggableFrozen is called after every receive the frozen property which was set to true
Usage examle:
this piece of code is taken from my chess game
...;...<div className=stylesChessboard style= position: 'relative' ref = thisparentNode = node> <Draggable parentNode = thisparentNode frozen = isFrozen className=stylesqueen styles= left: cellIndex * inlineStylescellSize top: rowIndex * inlineStylescellSize zIndex: isGrabbed ? 2 : 1 cursor: isGrabbed ? 'move' : 'pointer' onGrab = onFigureGrab onDrag = onFigureDrag onDrop = onFigureDrop onDraggableFrozen = { if !thisstateisFrozen return; this; } /></div>...// Another example: using as wrapper for own elements<Draggable ... > <span ... > Hello </span></Draggable>
queen draggs