react_simple_drag_and_drop

    1.0.4 • Public • Published

    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

    ...
    import Draggable from 'react_simple_drag_and_drop';
    ...
    <div
        className={styles.Chessboard}
        style={{
            position: 'relative'
        }}
        ref = {node => this.parentNode = node}
    >
        <Draggable
            parentNode = {this.parentNode}
            frozen = {isFrozen}
            className={styles.queen}
            styles={{
                left: cellIndex * inlineStyles.cellSize,
                top: rowIndex * inlineStyles.cellSize,
                zIndex: isGrabbed ? 2 : 1,
                cursor: isGrabbed ? 'move' : 'pointer'
            }}
            onGrab = {onFigureGrab.bind(null, {
                color,
                row  : rowIndex,
                cell : cellIndex
            })}
            onDrag = {onFigureDrag.bind(null, {
                row  : rowIndex,
                cell : cellIndex
            })}
            onDrop = {onFigureDrop.bind(null, {
                color,
                row   : rowIndex,
                cell  : cellIndex
            })}
            onDraggableFrozen = {() => {
                if (!this.state.isFrozen) {
                    return;
                }
     
                this.setState({
                    isFrozen: false
                });
            }}
        />
    </div>
    ...
    // Another example: using as wrapper for own elements
    <Draggable ... >
        <span ... >
            Hello
        </span>
    </Draggable>

    queen draggs alt text

    Install

    npm i react_simple_drag_and_drop

    DownloadsWeekly Downloads

    10

    Version

    1.0.4

    License

    ISC

    Last publish

    Collaborators

    • fredddy123