Drag and drop

When sorting a list

• When grabbing the list item it should be elevated showing on top of the other list elements, use a shadow to indicate this.
• The area where it used to be should be a blank and empty box.
• The blank area should move with the item being dragged so that the user can see where the item will go when dropped.
• If the user drags the item outside of the list then the blank box should follow the horizontal/vertical position in the list.
• If the user drops the dragged item outside of the list the item should boink to where the blank box is.

When an item is waiting to be moved it should:

• have cursor grab cursor-grab
• have a hover effect hover:bg-neutral-100 dark:hover:bg-neutral-600
• have the icon drag-handle-v to the left

When an item is being moved it should:

• have cursor grabbing cursor-grabbing
• have a shadow shadow-lg
• have the icon drag-handle-v to the left
• have no hover effect

When used in a dropdown

See the dropdown documentation for how to implement the dropdown component, and apply the Drag and Drop guidelines above.

For example, if your list items already have an icon, use the fun-icon-drag-handle-v instead.

Here is an example how how it could look.

In this example we are using the following CSS.