Code

Implementation
Dnd.Zone Props
Dnd.Handle Props
Dnd.HandleButton Props
Dnd.SortLine Props

Bring your own drag-and-drop interactions.While these components are intended to help you create drag and drop experiences that align with our designs, they do not provide the actual drag-and-drop interactions. You should evaluate external libraries make the best choice for your needs.

Common Examples

import { Dnd } from "@servicetitan/anvil2";

Zone

The Dnd.Zone can be used to style an element as a drop zone.

Demo

Handle

The Dnd.Handle is an icon which helps users understand that something is draggable.

Demo

Handle Button

The Dnd.HandleButton is a button-wrapped icon which helps users understand that something is draggable. Use this if your draggable item contains other interactive elements.

Demo

Sort Line

The Dnd.SortLine indicates where an item will be dropped in a sortable list.The width of the line is based upon its nearest relatively positioned ancestor.This component should be used when you’re building an experience that is sortable in one dimension (i.e. vertical or horizontal lists). It is not suitable for sorting two-dimensional sorting (e.g. grids).

Demo

DndSort

If you’re not looking to create your own entire drag and drop solution, check to see if DndSort is capable of supporting your needs. It’s a pre-built composition that uses all of these Dnd components to cover many basic cases including: sorting a list, arranging items into groups, or both. Read more about that component here.

Best Practices

Draggables with interactivity

Demo

If your draggable item has interactive elements, use the Dnd.HandleButton to initiate dragging.

Demo

Don’t

If your draggable item has interactive elements, don’t nest interactive elements.

import { Dnd } from "@servicetitan/anvil2";

function ExampleComponent() {
return (

<Dnd.Zone isOver={false} isValid={false} isDragging={false}>
  {/* Zone content */}
</Dnd.Zone>
); }

`Dnd.Zone` Props

isDragging

boolean

required

Whether an item is currently being dragged.

isOver

boolean

required

Whether an item is currently being dragged over the zone.

isValid

boolean

required

Whether the current drag operation is valid for this zone.

children

ReactNode

Child elements to render inside the zone.

className

string

Optional CSS class name to apply to the zone.

ElementType

default:"div"

The HTML element type to render.

All props for the specified element type are also supported.

import { Dnd } from "@servicetitan/anvil2";

function ExampleComponent() {
  return <Dnd.Handle />;
}

`Dnd.Handle` Props

className

string

Optional CSS class name to apply to the handle

import { Dnd } from "@servicetitan/anvil2";

function ExampleComponent() {
return <Dnd.HandleButton isActive={false} />;
}

`Dnd.HandleButton` Props

In addition to the props listed below, the Dnd.HandleButton component can accept any ButtonCompound props.

className

string

Optional CSS class name to apply to the button

isActive

boolean

default:"false"

Whether the handle is currently being dragged

import { Dnd } from "@servicetitan/anvil2";

function ExampleComponent() {
  return (
    <Dnd.SortLine
      orientation="vertical"
      position="before"
      offset="-2px"
    />
  );
}

`Dnd.SortLine` Props

In addition to the props listed below, the Dnd.SortLine component can accept any valid HTML div props.

offset

string

The offset of the line from the item (CSS value, typically negative)

orientation

"horizontal" | "vertical"

The orientation of the sort - Note: line is rendered perpendicular to the sort

position

"before" | "after"

The position of the line relative to a target item

Anvil2 Web

Resources

Common Examples

Zone

Handle

Handle Button

Sort Line

DndSort

Best Practices

Draggables with interactivity

`Dnd.Zone` Props

`Dnd.Handle` Props

`Dnd.HandleButton` Props

`Dnd.SortLine` Props

Anvil2 Web

Resources

​Common Examples

​Zone

​Handle

​Handle Button

​Sort Line

​DndSort

​Best Practices

​Draggables with interactivity

​Dnd.Zone Props

​Dnd.Handle Props

​Dnd.HandleButton Props

​Dnd.SortLine Props

Common Examples

Zone

Handle

Handle Button

Sort Line

DndSort

Best Practices

Draggables with interactivity

`Dnd.Zone` Props

`Dnd.Handle` Props

`Dnd.HandleButton` Props

`Dnd.SortLine` Props