generated:catalog.entry.cdk-drag-drop.title
generated:catalog.entry.cdk-drag-drop.description
@xngui/cdk/drag-drop@xngui/cdk/drag-dropchrome:demo.section
chrome:demo.preview
cdk-preview:cdk-drag-drop.backlog
- Wire drag handles
- Reorder within the list
- Drop into another column
cdk-preview:cdk-drag-drop.done
- cdk-preview:cdk-drag-drop.drop-completed-tasks-here
import { XDrag, XDropList } from '@xngui/cdk/drag-drop';
<div class="columns">
<ul
xDropList
[xDropList]="'backlog'"
[xDropListDisabled]="false"
[xDropListEnterPredicate]="allowEnter"
(dropped)="onBacklogDropped($event)"
>
@for (task of backlog(); track task.id) {
<li
xDrag
[xDragListId]="'backlog'"
[xDragId]="task.id"
[xDragData]="task"
[xDragDisabled]="false"
>
{{ task.label }}
<li>
}
<ul>
<ul
xDropList
[xDropList]="'done'"
[xDropListDisabled]="false"
[xDropListEnterPredicate]="allowEnter"
(dropped)="onDoneDropped($event)"
>
@for (task of done(); track task.id) {
<li
xDrag
[xDragListId]="'done'"
[xDragId]="task.id"
[xDragData]="task"
[xDragDisabled]="false"
>
{{ task.label }}
<li>
}
<ul>
<div>
allowEnter(): boolean {
return true;
}
chrome:demo.events.title
chrome:demo.events.empty