A HOC component of Drag&Drop,Touch enabled and Reordering list for React.
npm install drag-list-react --save
import React from 'react';
import DragList from 'drag-list-react';
// 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 children
const listItem=({name})=>(
<div className={styles.nameTag}>{name}</div>
)
// Placeholder when dragging items
// Props is necessary because placeholder will receive style props from component.
const Placeholder=(props)=>(
<div className={styles.placeholder} {...props}></div>
)
const App = () => {
// Use placeholder
const List = DragList(listItem,Placeholder);
// Or not use placeholder
// const List = DragList(listItem);
return (
<List list={list} />
)
};
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. |