DragDrop List for React

Check out the awesome, and very easy to use react component for creating a dragdrop list.

Table of Contents

• Demos
• Installing
• Getting Started
• Options (Props)
  • myGid option:
  • dragName option:
  • dropName option:
  • removeItem option:
  • insertItem option:
  • dropFunc option:
  • style option:
  • animationDuration option
  • class option:
  • itemClass option:
  • topElem option:
  • bottomElem option:
  • topElemSticks option:
  • bottomElemSticks option:
  • scrollWhen option:
  • scrollSpeed option:
  • delayOnTouch option:
  • delayOnMouse option:
  • rotateFlying option:
  • lockX option:
• Children
• Understanding How It Works

Demos

Check out those demos, to see what that package looks like:

All Demos

• Shopping List
• Drag & Drop Props
• Profile Page
• Drag & Drop Props 2
• Drag & Drop & Input
• Drag & Drop Other Options

Installing

Use npm i -g react-drag-drop-list to install globally, or npm i react-drag-drop-list to install it locally to your project.

Or use npm i -D react-drag-drop-list to install it to your project as a dev-dependency. (Which, you probably won't want to?)

Although npm installs for you, make sure you have installed its dependencies: react, prop-types and react-dom.

Getting Started

Use import DragList from 'DragList' to use it in a React project.

What's more, you can use import DragList, { getKey() } from 'DragList' to also use the getKey() function, whose behavior is explained below.

Options (Props)

| PropName | Default Value | Type |Is Required| |:-------------------:|:---------------------------------------------:|:------------------------------------------:|:---------:| | myGid | Undefined | Number |Required | | dragName | Undefined | String |Optional | | dropName | Undefined | String |Optional | | removeItem | Undefined | function(myGid, myId, callback) |Optional | | insertItem | Undefined |function(dropFunc(item, myGid), myGid, myId)|Optional | | dropFunc |function(item, myGid){ return item; }| function(item, myGid) |Optional | | style | Undefined | React Style Object (camelCased) |Optional | |animationDuration| 250 | Number |Optional | | class | Undefined | String |Optional | | itemClass | Undefined | String |Optional | | topElem | Undefined | HTML / JSX Object |Optional | | bottomElem | Undefined | HTML / JSX Object |Optional | | topElemSticks | True | Bool |Optional | |bottomElemSticks | True | Bool |Optional | | scrollWhen | 48 | Number |Optional | | scrollSpeed | 1.00 | Number / Float |Optional | | delayOnTouch | 400 | Number |Optional | | delayOnMouse | 0 | Number |Optional | | rotateFlying | True | Bool |Optional | | lockX | False | Bool |Optional |