Drag-list-react

A HOC component of Drag&Drop,Touch enabled and Reordering list for React.

demo

Install

npm install drag-list-react --save

Usage

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} />
  )
};

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.

Recommend Projects