grid-draggable v3.3.0

grid-draggable

Draggable grid system

Installation

$ npm install --save grid-draggable

Usage

IMPORTANT NOTE: You need to use webpack as build tool, cause the grid system is based on react-flexbox-grid, it'll load flexboxgrid via style-loader and css-loader make sure you installed both of them.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import GridDraggable, {Section} from 'GridDraggable';
import {range} from 'lodash';

const list = range(20).map((col, i) => {
  return (
    <Section key={i}>
      <div key={i}>{col}</div>
    </Section>
  );
});

class Demo extends Component {
  constructor(props) {
    super(props);

    this.dragStart = this.dragStart.bind(this);
    this.onDrag = this.onDrag.bind(this);
    this.dragStop = this.dragStop.bind(this);
  }

  dragStart(e, data) {
    console.log('start: ', data);
  }

  onDrag(e, data, match) {
    console.log('drag: ', data, match);
  }

  dragStop(e, data) {
    console.log('stop: ', data);
  }

  render() {
    return (
      <GridDraggable
        dragStart={this.dragStart}
        onDrag={this.onDrag}
        dragStop={this.dragStop}
        lg={4}
        md={3}
        xs={6}
        rowClassName="row-test"
        colClassName="col-test">
        {list}
      </GridDraggable>
    );
  }
}

ReactDOM.render(
  <Demo/>
, document.getElementById('root'));

API

<GridDraggable/>

<GridDraggable/> is a element that wraps all draggable sections. The children pass in this component must be <Section/>.

Like below:

<GridDraggable {...props}>
  <Section/>
  <Section/>
  <Section/>
</GridDraggable>

Props:

Other props will directly pass to grid-breakpoint such as lg, md, sm, sx ... please reference to https://github.com/Canner/grid-breakpoint

<Section/>

<Section/> is used to create a draggable section that adds draggability to its children.

Props

The child of <Section/> could either be a function or react component. The first parameter will pass dragging, and match, that allow you the ability to decide what component you would like to render when events like dragging and matched happened.

There's an example:

<Section
  key={i}
  style={{width: '100%', height: '100%'}}
  handle=".handle" // set handler
  dragClassName="dragging">
  {({dragging, match}) => {
    if (match) return ( // when match return <div/>
      <div style={{color: 'red'}}>This is a match</div>
    );

    // create a react-motion animation, when dragging using animations.
    const motionStyle = dragging
    ? {
        scale: spring(1.1, springConfig),
        shadow: spring(16, springConfig)
      }
    : {
        scale: spring(1, springConfig),
        shadow: spring(1, springConfig)
      };

    return (
      <Motion style={motionStyle}>
        {({scale, shadow}) => (
            <div
              style={{
                boxShadow: `rgba(0, 0, 0, 0.2) 0px ${shadow}px ${2 * shadow}px 0px`,
                transform: `translate3d(0, 0, 0) scale(${scale})`,
                WebkitTransform: `translate3d(0, 0, 0) scale(${scale})`,
              }}>
              <div>
                {col}
                <button className="handle">Click me to drag</button>
              </div>
            </div>
          )
        }
      </Motion>
    );
  }}
</Section>

Start example server

npm start

License

MIT © Canner