Drag-list-react
A HOC component of Drag&Drop,Touch enabled and Reordering list for React.
Install
npm install drag-list-react --save
Usage
;; // Notice: Every item in your data list must contains property 'id'.// DragList component uses 'id' as the key of array.const list= id:1 name:'Item1' id:2 name:'Item2' id:3 name:'Item3' id:4 name:'Item4' // list item// Each properties in data list will be passed to the childrenconst listItem= <div className=stylesnameTag>name</div> // Placeholder when dragging items// Props is necessary because placeholder will receive style props from component.const Placeholder= <div className=stylesplaceholder ...props></div> const App = { // Use placeholder const List = ; // Or not use placeholder // const List = DragList(listItem); return <List /> };
API
Properties
name | type | default | description |
---|---|---|---|
disabled | Boolean | false | Disabled dragging and dropping |
type | String | Type of drag list.The list will be horizontal when it is set inline . |
|
isLongPress | Boolean | false | Should dragging be triggered by long pressing or not |
delay | Number | 300(ms) | The delay time of long pressing |
gutter | Number | 0 | The spacing between two items |
onDragBegin | Function(item,index,element) | Prams: item is the dragging element of your data array; index is the index of the dragging item in your data array; element is the real DOM node of your dragging item. |
|
onDragEnd | Function(list) | Param: list is the final list when dragging ends. |