react-drag-list

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.