- If you don't get the item names right or have inconsistent item names between drag states then nothing works right.
- You need a
<DragOverLay>
component in most cases (b/c the CSS doesn't work or look right most of the time) - You don's need the
useDraggable
css transforms if you use a drag overlay (and they are ugly compared to using theDragOverlay
component) - The
useSortable
css transforms are useful even when using a drag overlay because they implement the sorting CSS animations - dragOver events need to be idempotent (since they are fired repeatedly)
- you should not duplicate actions between
onDragEnd
andonDragOver
- you should handle intermediate transformations (like re-arranging lists)
in
onDragOver
. onDragOver
is called when the 'over' state changes, so it can be used to detect drag-out events too (i.e.if(!over){/* Nothing is being dragged over */}
)
Install the deps and start the dev server in the usual way:
yarn
yarn start