{"id":13482969,"url":"https://github.com/raisezhang/react-drag-listview","last_synced_at":"2025-03-27T13:33:12.168Z","repository":{"id":20137829,"uuid":"88940233","full_name":"raisezhang/react-drag-listview","owner":"raisezhang","description":"A simple draggable list component for React","archived":false,"fork":true,"pushed_at":"2023-01-10T13:08:59.000Z","size":2809,"stargazers_count":232,"open_issues_count":12,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-04-25T19:44:38.316Z","etag":null,"topics":["draggable","react","table-drag"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":"lennardvandenberg/react-drag-listview","license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/raisezhang.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-21T04:29:18.000Z","updated_at":"2024-04-18T10:46:01.000Z","dependencies_parsed_at":"2023-01-16T22:00:23.145Z","dependency_job_id":null,"html_url":"https://github.com/raisezhang/react-drag-listview","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raisezhang%2Freact-drag-listview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raisezhang%2Freact-drag-listview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raisezhang%2Freact-drag-listview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raisezhang%2Freact-drag-listview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raisezhang","download_url":"https://codeload.github.com/raisezhang/react-drag-listview/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245854754,"owners_count":20683411,"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":["draggable","react","table-drag"],"created_at":"2024-07-31T17:01:07.149Z","updated_at":"2025-03-27T13:33:11.835Z","avatar_url":"https://github.com/raisezhang.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# react-drag-listview\n\nReact drag list component.\n\n[![NPM version][npm-image]][npm-url]\n[![build status][travis-image]][travis-url]\n[![npm download][download-image]][download-url]\n\n[npm-image]: http://img.shields.io/npm/v/react-drag-listview.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/react-drag-listview\n[travis-image]: https://img.shields.io/travis/raisezhang/react-drag-listview.svg?style=flat-square\n[travis-url]: https://travis-ci.org/raisezhang/react-drag-listview\n[download-image]: https://img.shields.io/npm/dm/react-drag-listview.svg?style=flat-square\n[download-url]: https://npmjs.org/package/react-drag-listview\n\n## install\n\n[![rc-table](https://nodei.co/npm/react-drag-listview.png)](https://npmjs.org/package/react-drag-listview)\n\n\n## Use on mobile (touch) devices\n\n* `react-drag-listview` already supports mobile (touch) devices, which can be easily implemented based on the [dragdroptouch](https://github.com/Bernardo-Castilho/dragdroptouch) polyfill\n* Need to manually add polyfill `dragdroptouch` to your website. e.g.\n  ```html\n  \u003cscript id=\"DragDropTouch\" src=\"https://bernardo-castilho.github.io/DragDropTouch/DragDropTouch.js\"\u003e\u003c/script\u003e\n  ```\n* Example: [Drag on mobile devices](https://codepen.io/raisezhang/pen/wvpVbQO)\n\n## Example\n\n* ###### Drag Rows\n    * [Simple dragging demo](https://raisezhang.github.io/react-drag-listview/examples/simple.html)\n    * [Dragging Ant-Design table](https://codepen.io/raisezhang/pen/MmjypX)\n    * [Dragging Ant-Design table width expanded rows](https://codepen.io/raisezhang/pen/OrrGJL)\n    * [Dragging Ant-Design transfer items](https://codepen.io/raisezhang/pen/rNdGEzN)\n    * [Dragging Ant-Design Nested List Items](https://codesandbox.io/s/react-drag-listview-nested-drag-example-mdrbh?file=/src/questions.js)\n\n* ###### Drag Columns\n    * [Simple dragging columns demo](https://raisezhang.github.io/react-drag-listview/examples/dragColumn.html)\n    * [Dragging Ant-Design table columns](https://codepen.io/raisezhang/pen/MoMoyz)\n\n## Development\n\n```bash\nnpm install\nnpm start\n```\n\n## Usage\n\n```javascript\nconst ReactDragListView = require('react-drag-listview');\n\nclass Demo extends React.Component {\n  constructor(props) {\n    super(props);\n\n    const data = [];\n    for (let i = 1, len = 7; i \u003c len; i++) {\n      data.push({\n        title: `rows${i}`\n      });\n    }\n\n    this.state = {\n      data\n    };\n  }\n\n  render() {\n    const that = this;\n    const dragProps = {\n      onDragEnd(fromIndex, toIndex) {\n        const data = [...that.state.data];\n        const item = data.splice(fromIndex, 1)[0];\n        data.splice(toIndex, 0, item);\n        that.setState({ data });\n      },\n      nodeSelector: 'li',\n      handleSelector: 'a'\n    };\n\n    return (\n      \u003cReactDragListView {...dragProps}\u003e\n        \u003col\u003e\n          {this.state.data.map((item, index) =\u003e (\n            \u003cli key={index}\u003e\n              {item.title}\n              \u003ca href=\"#\"\u003eDrag\u003c/a\u003e\n            \u003c/li\u003e\n          ))}\n        \u003c/ol\u003e\n      \u003c/ReactDragListView\u003e\n    );\n  }\n}\n\n```\n\n## API\n\n### Properties\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth style=\"width: 100px;\"\u003eName\u003c/th\u003e\n      \u003cth style=\"width: 50px;\"\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eonDragEnd\u003c/td\u003e\n      \u003ctd\u003eFunction(fromIndex, toIndex)\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eon drag end callback, required\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003enodeSelector\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003etr\u003c/td\u003e\n      \u003ctd\u003eget drag item cssQuery\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ehandleSelector\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003cb\u003enodeSelector\u003c/b\u003e\u003c/td\u003e\n      \u003ctd\u003eget drag handle cssQuery\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eignoreSelector\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eignore node list\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eenableScroll\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003etrue\u003c/td\u003e\n      \u003ctd\u003ewhether use auto scroll for dragging\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003escrollSpeed\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e10\u003c/td\u003e\n      \u003ctd\u003escroll speed\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003elineClassName\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eget dragLine's className, css properties must be use \u003cb\u003e!important\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## License\n\nreact-drag-listview is released under the MIT license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraisezhang%2Freact-drag-listview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraisezhang%2Freact-drag-listview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraisezhang%2Freact-drag-listview/lists"}