setNodeRefarguments, which you should already be familiar with if you've used the
useDraggablehook before, you'll notice that the
useSortablehook also provides a
setNodeRef, though not necessarily. For instance, when implementing a sortable element with a "drag handle", the ref should be attached to the parent node that should be sortable, but the listeners can be attached to the handle node instead.
useSortablehook provides a set of sensible default attributes for draggable items. We recommend you attach these to your draggable elements, though nothing will break if you don't.
transformproperty represents the displacement and change of scale transformation that a sortable item needs to apply to transition to its new position without needing to update the DOM order.
useSortablehook to function properly, it needs the
setNodeRefproperty to be attached to the HTML element you intend on turning into a sortable element:
refshould be assigned to the outer container that you want to become draggable, but this doesn't necessarily need to coincide with the container that the listeners are attached to:
useSortablehook is simply an abstraction on top of the
useDroppablehooks, in some advanced use cases, you may also use the
setDraggableNodeRefproperties to connect them to different nodes. For example, if you want the draggable element to have a different dimension than the droppable element that will be sortable:
setNodeRefis attached to.
idargument is a
numberthat should be unique.
useSortableis an abstraction on top of the
useDraggablehooks, which both require a unique identifier, the
useSortablehook also requires a unique identifier.
transitionproperty for you. It conveniently disables transform transitions while not dragging, but ensures that items transition back to their final positions when the drag operation is ended or cancelled.
transitionstyle property to the same node that has the