https://github.com/foveluy/dragact
a dragger layout system with React style .
https://github.com/foveluy/dragact
drag-and-drop drag-drop draggable grid grid-layout grid-system react reactjs sortable sortable-lists
Last synced: 10 months ago
JSON representation
a dragger layout system with React style .
- Host: GitHub
- URL: https://github.com/foveluy/dragact
- Owner: Foveluy
- License: mit
- Created: 2017-09-10T11:34:42.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-03-11T11:36:29.000Z (almost 7 years ago)
- Last Synced: 2025-03-28T19:11:48.580Z (10 months ago)
- Topics: drag-and-drop, drag-drop, draggable, grid, grid-layout, grid-system, react, reactjs, sortable, sortable-lists
- Language: TypeScript
- Homepage:
- Size: 26.9 MB
- Stars: 762
- Watchers: 22
- Forks: 187
- Open Issues: 32
-
Metadata Files:
- Readme: README.EN.md
- License: LICENSE
Awesome Lists containing this project
README
# Whath is Dragact?
Dragact is a react component, which allows you to build your own **dragable grid layout** easily.
### 快速安装
```
npm install --save dragact
```
### 写一个例子🌰
```javascript
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Dragact } from 'dragact';
import './index.css'
ReactDOM.render(
0
1
2
,
document.getElementById('root')
);
```
# Demo
[Live Demo](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html)
# Feature
- [x] auto sorted layout
- [x] mobile device supported
- [x] auto height fixed
- [x] static component
- [x] Draggable component
# Dragact 提供的属性
```ts
interface DragactProps {
layout?: DragactLayout[] //暂时不推荐使用
/**
* 宽度切分比
* 这个参数会把容器的宽度平均分为col等份
* 于是容器内元素的最小宽度就等于 containerWidth/col
*/
col: number,
/**
* 容器的宽度
*/
width: number,
/**容器内每个元素的最小高度 */
rowHeight: number,
/**
* 容器内部的padding
*/
padding?: number,
children: any[] | any
//
// interface GridItemEvent {
// event: any //浏览器拖动事件
// GridX: number //在布局中的x格子
// GridY: number //在布局中的y格子
// w: number //元素的宽度
// h: number //元素的高度
// UniqueKey: string | number //元素的唯一key
// }
/**
* 拖动开始的回调
*/
onDragStart?: (event: GridItemEvent) => void
/**
* 拖动中的回调
*/
onDrag?: (event: GridItemEvent) => void
/**
* 拖动结束的回调
*/
onDragEnd?: (key: number | string) => void
/**
* 每个元素的margin,第一个参数是左右，第二个参数是上下
*/
margin: [number, number]
/**
* layout的名字
*/
className: number | string
}
```
# Contribute
### Want a new feature?
1. If you have a feature request, please add it as an issue or make a pull request.
2. After adding some awesome feature, please run the test and make sure it will pass all tests before you make a PR.
### A bug?
If you have a bug to report, please reproduce the bug in Github issue with a sample code to help us easily isolate it.
# TODO-LIST
- [ ] horizontal swaping
- [ ] resizing
- [ ] touch handle
- [ ] responsive layout
- [ ] SSR/server rendering