Drag-drop
@xngui/cdk/drag-drop@xngui/cdk/drag-dropHeadless HTML5 drag-and-drop for lists and drop targets.
Preview
Backlog
- Wire drag handles
- Reorder within the list
- Drop into another column
Done
- Drop completed tasks here
import { XDrag, XDropList } from '@xngui/cdk/drag-drop';
<div class="columns">
<ul xDropList [xDropList]="'backlog'" (dropped)="onBacklogDropped($event)">
@for (task of backlog(); track task.id) {
<li xDrag [xDragListId]="'backlog'" [xDragId]="task.id" [xDragData]="task">
{{ task.label }}
<li>
}
<ul>
<ul xDropList [xDropList]="'done'" (dropped)="onDoneDropped($event)">
@for (task of done(); track task.id) {
<li xDrag [xDragListId]="'done'" [xDragId]="task.id" [xDragData]="task">
{{ task.label }}
<li>
}
<ul>
<div>
Events
Interact with the preview — events will appear here.