#Directives

#DraggableDirective

Selector: [vdndDraggable]

Makes an element draggable with mouse, touch and keyboard. See Drag behavior.

#DroppableDirective

Selector: [vdndDroppable]

Marks an element as a drop target.

#DroppableGroupDirective

Selector: [vdndGroup]

Provides a group name to every draggable and droppable inside it. Declare item templates inside this element as well.

#ScrollableDirective

Selector: [vdndScrollable]

Marks the element that scrolls for <vdnd-virtual-content> or *vdndVirtualFor. The element needs overflow: auto (or scroll) and a height. Adds the vdnd-scrollable class and overflow-anchor: none, and data-scroll-inset-top / data-scroll-inset-bottom while scrollInsetTop / scrollInsetBottom are not 0. A *vdndVirtualFor used directly inside it sets position: relative on it when it is not positioned (see VirtualForDirective).

scrollInsetTop and scrollInsetBottom tell a drag which part of the element sticky content inside it covers. You measure the heights; the drag treats the element as the part between them: constrainToContainer keeps the preview there, the auto-scroll zones start at its edges (a pointer over the sticky content scrolls at full speed), a pointer over the sticky content is not over the lists in the element (nor in scroll containers nested in it), and a keyboard drag keeps the placeholder clear of it. See Sticky headers and footers.

#VirtualForDirective

Selector: *vdndVirtualFor

Structural directive that renders only the visible items. Use it inside <vdnd-virtual-viewport>, <vdnd-virtual-content> or a vdndScrollable element.

<ng-container
  *vdndVirtualFor="let task of tasks(); trackBy: trackById; itemHeight: 48; overscan: 3"
>
  <div [vdndDraggable]="task.id">{{ task.title }}</div>
</ng-container>

Template context (VirtualForContext<T>): $implicit, index, first, last, count.

It always recycles rows: the view of a row that scrolls out renders a row that scrolls in. See Row recycling.

Used directly in a vdndScrollable element (no viewport component), it positions each row absolutely at its offset and opens a gap for the drag placeholder by moving the rows after it down. The rows scroll with the element only if it is their containing block, so when neither the element nor an element between it and the rows is positioned, the directive sets position: relative on it.

<div vdndScrollable vdndDroppable="tasks" (drop)="onDrop($event)" style="overflow: auto; height: 400px">
  <ng-container *vdndVirtualFor="let task of tasks(); itemHeight: 48; trackBy: trackById">
    <div [vdndDraggable]="task.id">{{ task.title }}</div>
  </ng-container>
</div>

#ContentHeaderDirective

Selector: [vdndContentHeader]

Marks a header projected into <vdnd-virtual-content>. Its height is measured and used as the content offset. No inputs or outputs.