{"id":20218261,"url":"https://github.com/cannercms/grid-draggable","last_synced_at":"2025-04-10T15:46:16.283Z","repository":{"id":57254045,"uuid":"72521676","full_name":"CannerCMS/grid-draggable","owner":"CannerCMS","description":"grid draggable system","archived":false,"fork":false,"pushed_at":"2019-03-26T05:58:30.000Z","size":1832,"stargazers_count":4,"open_issues_count":3,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-24T13:36:31.633Z","etag":null,"topics":["drag-and-drop","grid","grid-draggable","react"],"latest_commit_sha":null,"homepage":"https://canner.github.io/grid-draggable","language":"JavaScript","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/CannerCMS.png","metadata":{"files":{"readme":"README.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}},"created_at":"2016-11-01T09:23:52.000Z","updated_at":"2022-09-25T15:39:06.000Z","dependencies_parsed_at":"2022-08-31T08:21:08.756Z","dependency_job_id":null,"html_url":"https://github.com/CannerCMS/grid-draggable","commit_stats":null,"previous_names":["canner/grid-draggable"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fgrid-draggable","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fgrid-draggable/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fgrid-draggable/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fgrid-draggable/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CannerCMS","download_url":"https://codeload.github.com/CannerCMS/grid-draggable/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248243512,"owners_count":21071055,"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","grid","grid-draggable","react"],"created_at":"2024-11-14T06:37:46.759Z","updated_at":"2025-04-10T15:46:16.261Z","avatar_url":"https://github.com/CannerCMS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# grid-draggable [![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]\n\u003e Draggable grid system\n\n## Installation\n\n```sh\n$ npm install --save grid-draggable\n```\n\n## Usage\n\n**IMPORTANT NOTE:** You need to import react-flexbox-grid's css in order to let it work correctly\n\nOr add\n\n```html\n  \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/react-flexbox-grid@2.1.2/dist/react-flexbox-grid.css\"/\u003e\n```\n\ninto your HTML.\n\n\n```js\nimport React, {Component} from 'react';\nimport ReactDOM from 'react-dom';\nimport GridDraggable, {Section} from 'grid-draggable';\nimport {range} from 'lodash';\n\nconst list = range(20).map((col, i) =\u003e {\n  return (\n    \u003cSection key={i}\u003e\n      \u003cdiv key={i}\u003e{col}\u003c/div\u003e\n    \u003c/Section\u003e\n  );\n});\n\nclass Demo extends Component {\n  constructor(props) {\n    super(props);\n\n    this.dragStart = this.dragStart.bind(this);\n    this.onDrag = this.onDrag.bind(this);\n    this.dragStop = this.dragStop.bind(this);\n  }\n\n  dragStart(e, data) {\n    console.log('start: ', data);\n  }\n\n  onDrag(e, data, match) {\n    console.log('drag: ', data, match);\n  }\n\n  dragStop(e, data) {\n    console.log('stop: ', data);\n  }\n\n  render() {\n    return (\n      \u003cGridDraggable\n        dragStart={this.dragStart}\n        onDrag={this.onDrag}\n        dragStop={this.dragStop}\n        lg={4}\n        md={3}\n        xs={6}\n        rowClassName=\"row-test\"\n        colClassName=\"col-test\"\u003e\n        {list}\n      \u003c/GridDraggable\u003e\n    );\n  }\n}\n\nReactDOM.render(\n  \u003cDemo/\u003e\n, document.getElementById('root'));\n\n```\n\n## API\n\n### `\u003cGridDraggable/\u003e`\n\n`\u003cGridDraggable/\u003e` is a element that wraps all draggable sections. The children pass in this component **must** be `\u003cSection/\u003e`.\n\nLike below:\n\n```js\n\u003cGridDraggable {...props}\u003e\n  \u003cSection/\u003e\n  \u003cSection/\u003e\n  \u003cSection/\u003e\n\u003c/GridDraggable\u003e\n```\n\n**Props**:\n\n| Name         | Type    | Default | Description |\n| ------------ | ------- | ------- | ----------- |\n| onSwap | (number, number) =\u003e void | undefined | When grid is swapping, this function will be called |\n| dragStart | (MouseEvent, ReactDraggableCallbackData) =\u003e void | undefined | When grid is start dragging, this function will be called |\n| onDrag | (MouseEvent, ReactDraggableCallbackData, ?MatchNode) =\u003e void | undefined | When grid is draggind, this function will be called |\n| dragStop | (MouseEvent, ReactDraggableCallbackData) =\u003e void | undefined | When grid is stop dragging, this function will be called  |\n\nOther props will directly pass to `grid-breakpoint` such as `lg`, `md`, `sm`, `sx` ... please reference to https://github.com/Canner/grid-breakpoint\n\n### `\u003cSection/\u003e`\n\n`\u003cSection/\u003e` is used to create a draggable section that adds draggability to its children. \n\n**Props**\n\n| Name         | Type    | Default | Description |\n| ------------ | ------- | ------- | ----------- |\n| className | string | undefined | set className to the section |\n| style | {[string]: any} | undefined | css styles |\n| dragStyle | {[string]: any} | undefined | css styles for dragging element |\n| dragClassName | string | undefined | When dragging the grid, it will clone the element and apply css classname `dragClassName` to this element. |\n| handle | string | undefined | set your handler using css selector, pass string such as `.handle`  |\n\nThe child of `\u003cSection/\u003e` 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.\n\nThere's an example:\n\n```js\n\u003cSection\n  key={i}\n  style={{width: '100%', height: '100%'}}\n  handle=\".handle\" // set handler\n  dragClassName=\"dragging\"\u003e\n  {({dragging, match}) =\u003e {\n    if (match) return ( // when match return \u003cdiv/\u003e\n      \u003cdiv style={{color: 'red'}}\u003eThis is a match\u003c/div\u003e\n    );\n\n    // create a react-motion animation, when dragging using animations.\n    const motionStyle = dragging\n    ? {\n        scale: spring(1.1, springConfig),\n        shadow: spring(16, springConfig)\n      }\n    : {\n        scale: spring(1, springConfig),\n        shadow: spring(1, springConfig)\n      };\n\n    return (\n      \u003cMotion style={motionStyle}\u003e\n        {({scale, shadow}) =\u003e (\n            \u003cdiv\n              style={{\n                boxShadow: `rgba(0, 0, 0, 0.2) 0px ${shadow}px ${2 * shadow}px 0px`,\n                transform: `translate3d(0, 0, 0) scale(${scale})`,\n                WebkitTransform: `translate3d(0, 0, 0) scale(${scale})`,\n              }}\u003e\n              \u003cdiv\u003e\n                {col}\n                \u003cbutton className=\"handle\"\u003eClick me to drag\u003c/button\u003e\n              \u003c/div\u003e\n            \u003c/div\u003e\n          )\n        }\n      \u003c/Motion\u003e\n    );\n  }}\n\u003c/Section\u003e\n```\n\n\n\n## Start example server\n\n```\nnpm start\n```\n\n## License\n\nMIT © [Canner](https://github.com/canner)\n\n\n[npm-image]: https://badge.fury.io/js/grid-draggable.svg\n[npm-url]: https://npmjs.org/package/grid-draggable\n[travis-image]: https://travis-ci.org/Canner/grid-draggable.svg?branch=master\n[travis-url]: https://travis-ci.org/Canner/grid-draggable\n[daviddm-image]: https://david-dm.org/Canner/grid-draggable.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/Canner/grid-draggable\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fgrid-draggable","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcannercms%2Fgrid-draggable","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fgrid-draggable/lists"}