Documentation Index
Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
Use this file to discover all available pages before exploring further.
Anatomy
- Drag Handle
- Drag Handle Button
- Draggable Card
- Sort Line
- Drag Ghost
- Drag Preview
- Drop Zone
Options
Draggable Card
Besides the handle, the Draggle Card’s content is highly customizable. Draggable Card can use many of the features of the base Card component.Draggable Target
Where a user can grab a Card is configurable to the whole card or only on the drag handle.Whole Card
Use the whole Card as a draggable region when:- Users do NOT need to select the text of the Card
- D&D is a major feature of the content
- Outside of an overflow menu, other inner Card actions are not present
Drag handle only
Use the Drag Handle only as the draggable region when:- A user should be able to select the text of the Card
- The Card is very large
- There are other, non-overflow menu actions a user can take in the Card. This could be something as simple as a Checkbox.
Drag Preview
Drag Previews, what is displayed while dragging, can be customized.Drop Zone
Sort Line
Behavior
Drag handle alignment
The drag handle is always top-aligned in the Draggable Card. The rest of the card content can be vertically aligned as desired.Accessibility
Provide alternatives to Drag and Drop
While Dnd Sort is keyboard navigable, it is still preferable that users have alternatives to using drag and drop functionality to complete a task.When to use
Dnd Sort is a collection used for a few sub-categories of possible Drag and Drop scenarios. Such situations include:- Sorting a vertical or horizontal list of items
- Bucketing and sorting items, such as a kanban UI.