#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

<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:

.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:

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

Give the preview some lift:

.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:

.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:

.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:

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