Skip to content

alcat2008/react-drag-list

Repository files navigation

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.