Make a list of draggable collapsible items.
npm install react-draggable-list  
This component lets you make a user re-orderable list that animates nicely so
that the user can easily move large items:
The above example can be tried here:
https://streakyc.github.io/react-draggable-list/example/
You can find its code in the example directory. The example may be compiled
by running:
```
npm i --force
npm run example-buildor use this to auto-rebuild on changes:
npm run example-watch
This module exports the DraggableList React component, which takes the
following props:
- list must be an array of objects representing your list's items.itemKey
- must be the name of a property of the list's objects to use as atemplate
key to identify the objects, or it must be a function that takes an object as
an argument and returns a key.
- must be a React component used to render the list items. This mustonMoveEnd
not be a stateless-functional component. If possible, don't pass a new
class instance on every render. See the next section for more information
on the template including a description of the props passed to the component.
- may be a function which will be called when the user drags and(newList: Array
drops an item to a new position in the list. The arguments to the function
will be
A DraggableList instance has the following methods:
- getItemInstance(key) will return a reference to the mounted instance of the
template for a given key.
The template component is passed the following props:
- item is an object from the list prop passed to DraggableList.itemSelected
- is a number from 0 to 1. It starts at 0, and quickly increasesanySelected
to 1 when the item is picked up by the user. This may be used to animate the
item when the user picks it up or drops it.
- is a number from 0 to 1. It starts at 0, and quickly increasesdragHandleProps
to 1 when any item is picked up by the user.
- is an object which should be spread as props on the HTMLcommonProps
element to be used as the drag handle. The whole item will be draggable by the
wrapped element. See the
example
to see how it should be used.
- will be set to the same value passed as the commonProps prop
to the DraggableList component.
The template component should be styled with max-height set to "100%" for best
results.
The template component will have its props updated many times quickly during
the animation, so implementing shouldComponentUpdate in its children is
highly recommended.
The template component may have a getDragHeight` method which may return a
number to set the height in pixels of the item while the user is dragging it.
If the method returns null or is not present, then the drag height will be
equal to the element's natural height.
To use this module in browsers, a CommonJS bundler such as Parcel, Browserify, or
Webpack should be used.
This project relies on the javascript Map object being available globally. A
global polyfill such as Babel's polyfill
is required to support older browsers that don't implement these.
Both TypeScript and
Flow type definitions for this module are included!
The type definitions won't require any configuration to use.