react-drag-list
react-drag-list copied to clipboard
Published
20 hours ago •
alcat2008
alcat2008
A simple draggable list component。
react-drag-list
React DraggableList Component
Development
npm install typings -g
npm install
typings install
npm start
Example
http://localhost:8000/examples/
online example: http://front-ender.me/react-drag-list/
install
Usage
import React from 'react'
import ReactDragList from 'react-drag-list'
React.render(
<ReactDragList
dataSource={['row1', 'row2', 'row3']}
row={(record, index) => <div>index + record</div>}
/>, container);
API
props
| Name | Type | Default | Description |
|---|---|---|---|
| prefixCls | string | rc-draggable-list | The draggable list dom node's prefixCls |
| className | string | additional className for draggable list | |
| style | object | Root style for draggable list element. Such as width, height | |
| rowClassName | string | additional className for draggable list row item | |
| dataSource | any[] | data record array to be rendered | |
| rowKey | string | key of row to be rendered | |
| row | function(record, index): ReactNode | row data to be rendered | |
| disabled | boolean | false | disables the drag if set to true |
| handles | boolean | false | show drag handles |
| animation | string | 150 | ms, animation speed moving items when sorting, 0 — without animation |
| onUpdate | function(event: Object) | called when sorting list changed | |
| ghostClass | string | additional className for the drop placeholder | |
| chosenClass | string | additional className for the chosen item | |
| dragClass | string | additional className for the dragging item |
Test Case
npm test
npm run chrome-test
Coverage
npm run coverage
open coverage/ dir
License
react-drag-list is released under the MIT license.
alcat2008