{"id":25983692,"url":"https://github.com/foveluy/dragact","last_synced_at":"2025-04-04T20:15:41.311Z","repository":{"id":95494778,"uuid":"103024436","full_name":"Foveluy/Dragact","owner":"Foveluy","description":"a dragger layout system with React style . ","archived":false,"fork":false,"pushed_at":"2019-03-11T11:36:29.000Z","size":28164,"stargazers_count":762,"open_issues_count":32,"forks_count":187,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-03-28T19:11:48.580Z","etag":null,"topics":["drag-and-drop","drag-drop","draggable","grid","grid-layout","grid-system","react","reactjs","sortable","sortable-lists"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Foveluy.png","metadata":{"files":{"readme":"README.EN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-10T11:34:42.000Z","updated_at":"2025-03-21T06:49:57.000Z","dependencies_parsed_at":"2023-04-06T11:11:56.716Z","dependency_job_id":null,"html_url":"https://github.com/Foveluy/Dragact","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foveluy%2FDragact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foveluy%2FDragact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foveluy%2FDragact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Foveluy%2FDragact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Foveluy","download_url":"https://codeload.github.com/Foveluy/Dragact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242681,"owners_count":20907134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["drag-and-drop","drag-drop","draggable","grid","grid-layout","grid-system","react","reactjs","sortable","sortable-lists"],"created_at":"2025-03-05T10:31:52.272Z","updated_at":"2025-04-04T20:15:41.266Z","avatar_url":"https://github.com/Foveluy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Whath is Dragact?\n\nDragact is a react component, which allows you to build your own **dragable grid layout** easily.\n\n![](https://github.com/215566435/React-dragger-layout/blob/master/example/image/NormalLayoutDemo.gif)\n\n### 快速安装\n```\nnpm install --save dragact\n```\n\n### 写一个例子🌰\n```javascript\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\nimport { Dragact } from 'dragact';\nimport './index.css'\n\nReactDOM.render(\n    \u003cDragact\n        col={8}\n        width={800}\n        margin={[5, 5]}\n        rowHeight={40}\n        className='plant-layout'\n    \u003e\n        \u003cdiv key={0} data-set={{ GridX: 0, GridY: 0, w: 4, h: 2 }} className='layout-child'\u003e0\u003c/div\u003e\n        \u003cdiv key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className='layout-child'\u003e1\u003c/div\u003e\n        \u003cdiv key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className='layout-child'\u003e2\u003c/div\u003e\n    \u003c/Dragact\u003e,\n    document.getElementById('root')\n);\n```\n\n# Demo\n[Live Demo](http://htmlpreview.github.io/?https://github.com/215566435/React-dragger-layout/blob/master/build/index.html)\n\n\n# Feature\n- [x] auto sorted layout\n- [x] mobile device supported\n- [x] auto height fixed\n- [x] static component\n- [x] Draggable component\n\n\n# Dragact 提供的属性\n```ts\ninterface DragactProps {\n    layout?: DragactLayout[] //暂时不推荐使用\n    /** \n     * 宽度切分比 \n     * 这个参数会把容器的宽度平均分为col等份\n     * 于是容器内元素的最小宽度就等于 containerWidth/col\n    */\n    col: number,\n\n    /** \n     * 容器的宽度\n    */\n    width: number,\n\n    /**容器内每个元素的最小高度 */\n    rowHeight: number,\n\n    /**\n     * 容器内部的padding\n     */\n    padding?: number,\n\n    children: any[] | any\n\n\n    // \n    // interface GridItemEvent {\n    //     event: any //浏览器拖动事件\n    //     GridX: number //在布局中的x格子  \n    //     GridY: number //在布局中的y格子  \n    //     w: number //元素的宽度\n    //     h: number //元素的高度\n    //     UniqueKey: string | number //元素的唯一key\n    // }\n\n    /**\n     * 拖动开始的回调\n     */\n    onDragStart?: (event: GridItemEvent) =\u003e void\n\n    /**\n     * 拖动中的回调\n     */\n    onDrag?: (event: GridItemEvent) =\u003e void\n\n    /**\n     * 拖动结束的回调\n     */\n    onDragEnd?: (key: number | string) =\u003e void\n\n    /**\n     * 每个元素的margin,第一个参数是左右，第二个参数是上下\n     */\n    margin: [number, number]\n\n    /** \n     * layout的名字\n    */\n    className: number | string\n}\n\n```\n\n\n\n# Contribute\n\n### Want a new feature?\n1. If you have a feature request, please add it as an issue or make a pull request.\n2. After adding some awesome feature, please run the test and make sure it will pass all tests before you make a PR.\n\n### A bug?\nIf you have a bug to report, please reproduce the bug in Github issue with a sample code to help us easily isolate it.\n\n\n\n\n# TODO-LIST\n- [ ] horizontal swaping\n- [ ] resizing\n- [ ] touch handle\n- [ ] responsive layout\n- [ ] SSR/server rendering \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoveluy%2Fdragact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoveluy%2Fdragact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoveluy%2Fdragact/lists"}