> For AI agents: the complete documentation index is available at https://gultyayev.github.io/ngx-virtual-dnd/llms.txt, the full documentation bundle is available at https://gultyayev.github.io/ngx-virtual-dnd/llms-full.txt.

# Styling

The library ships no visual styles for items, lists or the drop placeholder. It adds state classes, listed below, that you style however you like.

Put the rules below in a global stylesheet (`styles.css`, or a component with `ViewEncapsulation.None`). The library renders the preview, the placeholder and the lists' inner elements, so your component's scoped styles do not reach them. Styles for your own row elements can stay in the component that declares the row template.

## Classes

| Class                                                    | On                                  | When                                                 |
| -------------------------------------------------------- | ----------------------------------- | ---------------------------------------------------- |
| `vdnd-draggable`                                         | Draggables                          | Always                                               |
| `vdnd-draggable-dragging`                                | Draggables                          | While being dragged (the element is `display: none`) |
| `vdnd-draggable-disabled`                                | Draggables                          | `disabled` is true                                   |
| `vdnd-drag-pending`                                      | Draggables                          | `dragDelay` has passed, drag not started yet         |
| `vdnd-droppable`                                         | Droppables                          | Always                                               |
| `vdnd-droppable-active`                                  | Droppables                          | The pointer or keyboard target is this droppable     |
| `vdnd-droppable-disabled`                                | Droppables                          | `disabled` is true                                   |
| `vdnd-drag-placeholder`, `vdnd-drag-placeholder-visible` | Drop-position placeholder           | During a drag, in the target list                    |
| `vdnd-drag-preview`                                      | Preview box                         | During a drag                                        |
| `vdnd-drag-preview-dropping`                             | Preview box                         | While it plays the drop animation                    |
| `vdnd-overlay-container`                                 | Body-level container of the preview | After `<vdnd-drag-preview>` renders                  |
| `vdnd-dragging`                                          | `<body>`                            | While any drag is in progress                        |
| `vdnd-dragging-touch`                                    | `<body>`                            | While a touch drag is in progress                    |

`<vdnd-sortable-list>`, `<vdnd-virtual-scroll>`, `<vdnd-virtual-viewport>`, `<vdnd-virtual-content>`, `vdndScrollable` and `<vdnd-placeholder>` also carry their own name as a class (for example `vdnd-sortable-list`).

## Recipes

Show where the item will land:

```css
.vdnd-drag-placeholder {
  box-sizing: border-box;
  border: 2px dashed #9aa4b2;
  border-radius: 8px;
}
```

Highlight the list under the pointer. With `<vdnd-sortable-list>` the droppable is an inner element, so target it through the list:

```css
.vdnd-sortable-list .vdnd-droppable-active {
  background: #e4f3f2;
  box-shadow: inset 0 0 0 2px #0e9488;
}
```

Give the preview some lift:

```css
.vdnd-drag-preview > * {
  border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgb(20 28 46 / 0.3);
  transform: rotate(1.5deg);
}
```

Dim items that cannot be dragged:

```css
.vdnd-draggable-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

Show a grab cursor on hover, and stop hover styles from firing on other rows during a drag:

```css
.vdnd-draggable {
  cursor: grab;
}

body.vdnd-dragging .vdnd-draggable {
  pointer-events: none;
}
```

## The built-in cursor

The library's only built-in style is a `grabbing` cursor over lists and items (`vdnd-droppable` and `vdnd-draggable` elements) during mouse and keyboard drags. Touch drags get no cursor. The rest of the page keeps its cursor, and so do elements inside items and lists that set their own `cursor` (a drag handle with `cursor: grab`, a button); the `pointer-events: none` recipe above covers those inside items.

Show the grabbing cursor over the whole page during a drag, not only over lists and items. A rule on `body` alone is enough, because `cursor` inherits; it costs a style recalculation that grows with the size of the page each time a drag starts and ends. Avoid `body.vdnd-dragging *`, which restyles every element:

```css
body.vdnd-dragging:not(.vdnd-dragging-touch) {
  cursor: grabbing;
}
```