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.