<div class="card"> <div class="card-body pb-0"> <h4 class="card-title">Basic Drag n Drop</h4> </div> <ul class="list-group pl-0 shadow-sm" cdkDropList (cdkDropListDropped)="drop($event)" *ngIf="movies.length" > <li class="list-group-item border-bottom border-top-0 border-right-0 border-left-0 cursor-pointer d-flex align-items-center" *ngFor="let mname of movies" cdkDrag > <i class="mdi mdi-arrow-right font-medium text-info mr-2 font-18"></i> <h6 class="mb-0">{{ mname }}</h6> </li> </ul> </div> <h4 class="card-title">Transferring items between lists</h4> <div class="row mt-4"> <div class="col-md-6"> <div class="card"> <div class="bg-info py-2 px-3"> <h4 class="text-white mb-0">Todo</h4> </div> <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]" class="todo" (cdkDropListDropped)="onDrop($event)" > <div class="py-3 cursor-pointer mb-1 d-flex align-items-center border-bottom" *ngFor="let item of todo" cdkDrag > <span class="todo-border"></span> <h6 class="mb-0 ml-3">{{ item }}</h6> </div> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="bg-success py-2 px-3"> <h4 class="text-white mb-0">Done</h4> </div> <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]" class="done" (cdkDropListDropped)="onDrop($event)" > <div class="py-3 cursor-pointer mb-1 d-flex align-items-center border-bottom" *ngFor="let item of done" cdkDrag > <span class="done-border"></span> <h6 class="mb-0 ml-3">{{ item }}</h6> </div> </div> </div> </div> </div> <div class="card"> <div class="card-body"> <h4 class="card-title">List orientation</h4> <ul class="list-group list-group-horizontal-lg pl-0 mt-4" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="orientationDrop($event)" *ngIf="horizontalOrientation.length" > <li class="list-group-item cursor-pointer text-center" *ngFor="let hname of horizontalOrientation" cdkDrag > <i class="mdi mdi-cube-outline font-medium text-info mr-2 font-18 d-block" ></i> <h6 class="mb-0">{{ hname }}</h6> </li> </ul> </div> </div> <h4 class="card-title">Drag&Drop enter predicate</h4> <div class="row mt-4"> <div class="col-md-6"> <div class="card"> <div class="bg-info py-2 px-3"> <h4 class="text-white mb-0">Available numbers</h4> </div> <div id="all" cdkDropList cdkDropList [cdkDropListData]="all" cdkDropListConnectedTo="even" (cdkDropListDropped)="oddevenDrop($event)" [cdkDropListEnterPredicate]="noReturnPredicate" class="todo" > <div class="py-3 cursor-pointer mb-1 d-flex align-items-center border-bottom" *ngFor="let number of all" [cdkDragData]="number" cdkDrag > <span class="todo-border"></span> <h6 class="mb-0 ml-3">{{ number }}</h6> </div> </div> </div> </div> <div class="col-md-6"> <div class="card"> <div class="bg-success py-2 px-3"> <h4 class="text-white mb-0">Even numbers</h4> </div> <div id="even" cdkDropList [cdkDropListData]="even" cdkDropListConnectedTo="all" (cdkDropListDropped)="oddevenDrop($event)" [cdkDropListEnterPredicate]="evenPredicate" class="done" > <div class="py-3 cursor-pointer mb-1 d-flex align-items-center border-bottom" *ngFor="let number of even" [cdkDragData]="number" cdkDrag > <span class="done-border"></span> <h6 class="mb-0 ml-3">{{ number }}</h6> </div> </div> </div> </div> </div>