CannerCMS / grid-draggable

grid draggable system

Home Page:https://canner.github.io/grid-draggable

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

grid-draggable NPM version Build Status Dependency Status

Draggable grid system

Installation

$ npm install --save grid-draggable

Usage

IMPORTANT NOTE: You need to import react-flexbox-grid's css in order to let it work correctly

Or add

  <link rel="stylesheet" type="text/css" href="https://unpkg.com/react-flexbox-grid@2.1.2/dist/react-flexbox-grid.css"/>

into your HTML.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import GridDraggable, {Section} from 'grid-draggable';
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

About

grid draggable system

https://canner.github.io/grid-draggable

License:MIT License


Languages

Language:JavaScript 100.0%