🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL


Documentation

react-drag-list


React DraggableList Component

NPM version build status Test coverage gemnasium deps npm download

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

react-drag-list

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.


You May Also Like