React Orderable
https://github.com/clauderic/react-sortable-hoc instead!
DEPRECATED - RecommendChecklist before 0.2.0 release
- Improve demo page (add examples of different kinds of uses)
- Make demo page responsive
- The example code should be directly usable. There are pieces missing right now.
Demo
Features
- Horizontal or vertical layout
- Drag handle
- Animation
- Ghost item
- Item movement is constrained to a single axis (x or y)
- Touch support
Usage
; // Orderable requires an ES6 polyfill;;; // ... <Orderable animated className=stylessongs ghost itemSize=90 onChange=thishandleChange> songs</Orderable>
Orderable interface
Property | Required | Default | Description |
---|---|---|---|
animated | N | false | Whether to animate item position during a drag |
children | N | The items to order | |
className | N | Class name for the Orderable component's div | |
ghost | N | false | Whether to show a ghost item when an item is being dragged |
horizontal | N | false | Whether this is a horizontal or vertical list |
itemSize | Y | Item height for vertical lists, item width for horizontal lists | |
onChange | Y | Callback that receives an ordered array of item ids when a drag completes |
Items inside an Orderable must have an id property (similar to key) which is used to keep track of item order.
Item interface
These are the props the item component must support.
Property | Required | Description |
---|---|---|
className | Y | Class name for the item's div |
dragging | N | Whether this item is being dragged |
ghost | N | Whether this is a ghost item |
onDragStart | Y | Mouse down or touch start handler for the item's handle (this can be the item itself) |
style | Y | Style for the item's div |
Candidates for improvements
- Variable item size
- Item size from element bounds
- If I have variable item size, do I support changing item size during a drag?
- Margin between items
- Dragging items between groups
- Touch cancel