Create angular drag and drop component using angular material api

Follow the below steps to build drag and drop component:-

ng add @angular/cli

ng new fms




ng add @angular/material




ng add @angular/cdk




ng generate @angular/cdk:drag-drop draganddrop

draganddrop.component.html




<div class="container">

<h2>To do</h2>




<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo"

[cdkDropListConnectedTo]="doneList" class="list" (cdkDropListDropped)="drop($event)">

<div class="list-item" *ngFor="let item of todo" cdkDrag>{{item}}</div>

</div>

</div>




<div class="container">

<h2>Done</h2>




<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done"

[cdkDropListConnectedTo]="todoList" class="list" (cdkDropListDropped)="drop($event)">

<div class="list-item" *ngFor="let item of done" cdkDrag>{{item}}</div>

</div>

</div>

draganddrop.component.ts

import { Component } from '@angular/core';

import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';




@Component({

selector: 'app-draganddrop',

templateUrl: './draganddrop.component.html',

styleUrls: ['./draganddrop.component.css'],

})

export class DraganddropComponent {

todo = [

'Get to work',

'Pick up groceries',

'Go home',

'Fall asleep'

];




done = [

'Get up',

'Brush teeth',

'Take a shower',

'Check e-mail',

'Walk dog'

];




drop(event: CdkDragDrop<string[]>) {

if (event.previousContainer === event.container) {

moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);

} else {

transferArrayItem(event.previousContainer.data,

event.container.data,

event.previousIndex,

event.currentIndex);

}

}

}

draganddrop.component.spec.ts

import { DragDropModule } from '@angular/cdk/drag-drop';

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { NoopAnimationsModule } from '@angular/platform-browser/animations';

import { DraganddropComponent } from './draganddrop.component';




describe('DraganddropComponent', () => {

let component: DraganddropComponent;

let fixture: ComponentFixture<DraganddropComponent>;




beforeEach(async(() => {

TestBed.configureTestingModule({

declarations: [ DraganddropComponent ],

imports: [

NoopAnimationsModule,

DragDropModule,

]

}).compileComponents();

}));




beforeEach(() => {

fixture = TestBed.createComponent(DraganddropComponent);

component = fixture.componentInstance;

fixture.detectChanges();

});




it('should compile', () => {

expect(component).toBeTruthy();

});

});

draganddrop.component.css

.container {

width: 400px;

max-width: 100%;

margin: 0 20px;

display: inline-block;

vertical-align: top;

}

.list {

border: solid 1px #ccc;

min-height: 60px;

background: white;

border-radius: 4px;

display: block;

overflow: hidden;

}

.list-item {

padding: 20px 10px;

border-bottom: solid 1px #ccc;

box-sizing: border-box;

cursor: move;

background: white;

color: black;

font-size: 14px;

}

.list-item:last-child {

border: none;

}

/* Highlight the list item that is being dragged. */

.cdk-drag-preview {

border-radius: 4px;

box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),

0 8px 10px 1px rgba(0, 0, 0, 0.14),

0 3px 14px 2px rgba(0, 0, 0, 0.12);

}

/* Animate items as they're being sorted. */

.cdk-drop-dragging .cdk-drag {

transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);

}

/* Animate an item that has been dropped. */

.cdk-drag-animating {

transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);

}

.cdk-drag-placeholder {

opacity: 0;

}