The useSortable hook requires an id and an index. It accepts all the same options as the Sortable class. Refer to the Input section below for more information.
The useSortable hook is a thin wrapper around the Sortable class that makes it easier to create sortable elements in React. It therefore accepts all of the same input arguments.
The useSortable hook accepts all of the same arguments as the useDraggable hook and useDroppable hooks, as well as additional arguments that are specific to sortable elements.
If you already have a reference to the element, you can pass it to the element option instead of using the ref that is returned by the useSortable hook to connect the sortable element.
If you already have a reference to the drag handle element, you can pass it to the handle option instead of using the handleRef that is returned by the useSortable hook to connect the sortable handle element.
If you already have a reference to the element you want to use as the droppable target for this sortable element, you can pass it to the target option instead of using the targetRef that is returned by the useSortable hook.
Optionally supply a number to set the collision priority of the droppable target of this sortable element. The higher the number, the higher the priority when detecting collisions. This can be useful if there are multiple droppable elements that overlap.
The data argument is for advanced use-cases where you may need access to additional data about the sortable element in event handlers, modifiers, sensors or custom plugins.
This is an advanced feature and should not need to be used by most consumers.
You can supply a function that returns an array of reactive effects that can be set up and automatically cleaned up when the component invoking the useSortable hook element is unmounted.
A boolean value that indicates whether the sortable is being dropped. This can be used to style the sortable element differently during the drop animation.