react-grid-layout-between

A draggable and resizable grid layout with responsive breakpoints , can between two or more Layouts, for React. Based on React-DnD.

Live Demo : http://demo.sunxinfei.com/

Install

npm install --save react-grid-layout-between

Usage

import React, { Component } from 'react'

import GridLayout from 'react-grid-layout-between'
import 'react-grid-layout-between/dist/index.css'

class Example extends Component {
  render() {
    return <GridLayout />
  }
}

Features:

• [x] get <reac-grid-layout-between /> component

• [x] DnD widgets between layouts

• [x] 100% React

• [x] Draggable widgets

• [x] Configurable packing: horizontal, vertical

• [x] Bounds checking for dragging

• [x] Responsive breakpoints

• [x] Separate layouts per responsive breakpoint

• [x] Grid Items placed using CSS Transforms

• [x] Drag Custom Preview

• [ ] Drag widgets colliseion by gravity center

• [ ] Static widgets

• [ ] Resizable widgets

• [ ] Support touchable device Issue

bugs:

• [x] ~~when 2x2 or 1x2 collosion bug for horizontal~~

License

MIT © SunXinFei