❤
npm
Sign UpSign In

grid-draggable

3.3.0 • Public • Published

grid-draggable NPM version Build Status Dependency Status

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:

Name Type Default Description
onSwap (number, number) => void undefined When grid is swapping, this function will be called
dragStart (MouseEvent, ReactDraggableCallbackData) => void undefined When grid is start dragging, this function will be called
onDrag (MouseEvent, ReactDraggableCallbackData, ?MatchNode) => void undefined When grid is draggind, this function will be called
dragStop (MouseEvent, ReactDraggableCallbackData) => void undefined When grid is stop dragging, this function will be called

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

Name Type Default Description
className string undefined set className to the section
style {[string]: any} undefined css styles
dragStyle {[string]: any} undefined css styles for dragging element
dragClassName string undefined When dragging the grid, it will clone the element and apply css classname dragClassName to this element.
handle string undefined set your handler using css selector, pass string such as .handle

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

Readme

Keywords

Package Sidebar

Install

npm i grid-draggable

Repository

github.com/canner/grid-draggable

Homepage

github.com/canner/grid-draggable#readme

Weekly Downloads

3

Version

3.3.0

License

MIT

Unpacked Size

38.6 kB

Total Files

9

Last publish

Collaborators

  • chilijung
Try on RunKit
Report malware