https://github.com/cannercms/grid-draggable
grid draggable system
https://github.com/cannercms/grid-draggable
drag-and-drop grid grid-draggable react
Last synced: about 1 year ago
JSON representation
grid draggable system
- Host: GitHub
- URL: https://github.com/cannercms/grid-draggable
- Owner: CannerCMS
- License: mit
- Created: 2016-11-01T09:23:52.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-03-26T05:58:30.000Z (over 7 years ago)
- Last Synced: 2025-03-24T13:36:31.633Z (over 1 year ago)
- Topics: drag-and-drop, grid, grid-draggable, react
- Language: JavaScript
- Homepage: https://canner.github.io/grid-draggable
- Size: 1.75 MB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# grid-draggable [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]
> Draggable grid system
## Installation
```sh
$ 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
```html
```
into your HTML.
```js
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 (
{col}
);
});
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 (
{list}
);
}
}
ReactDOM.render(
, document.getElementById('root'));
```
## API
### ``
`` is a element that wraps all draggable sections. The children pass in this component **must** be ``.
Like below:
```js
```
**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
### ``
`` 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 `` 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:
```js
{({dragging, match}) => {
if (match) return ( // when match return
This is a match
);
// 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 (
{({scale, shadow}) => (
{col}
Click me to drag
)
}
);
}}
```
## Start example server
```
npm start
```
## License
MIT © [Canner](https://github.com/canner)
[npm-image]: https://badge.fury.io/js/grid-draggable.svg
[npm-url]: https://npmjs.org/package/grid-draggable
[travis-image]: https://travis-ci.org/Canner/grid-draggable.svg?branch=master
[travis-url]: https://travis-ci.org/Canner/grid-draggable
[daviddm-image]: https://david-dm.org/Canner/grid-draggable.svg?theme=shields.io
[daviddm-url]: https://david-dm.org/Canner/grid-draggable