React DraggableList Component
npm install typings -g
npm install
typings install
npm start
http://localhost:8000/examples/
online example: http://front-ender.me/react-drag-list/
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);
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 |
npm test
npm run chrome-test
npm run coverage
open coverage/ dir
react-drag-list is released under the MIT license.