angular-material-app documentation
  1. Components
  2. DragDropComponent

File

src/app/materials/drag-drop/drag-drop.component.ts

Implements

OnInit

Metadata

selector app-drag-drop
styleUrls ./drag-drop.component.scss
templateUrl ./drag-drop.component.html

Index

Properties
Methods

Constructor

constructor()
Defined in src/app/materials/drag-drop/drag-drop.component.ts:19

Methods

drop
drop(event: CdkDragDrop)
Defined in src/app/materials/drag-drop/drag-drop.component.ts:25
Parameters :
Name Type Optional
event CdkDragDrop<string[]> No
Returns : void
ngOnInit
ngOnInit()
Defined in src/app/materials/drag-drop/drag-drop.component.ts:23
Returns : void

Properties

movies
Type : []
Default value : [ 'Episode I - The Phantom Menace', 'Episode II - Attack of the Clones', 'Episode III - Revenge of the Sith', 'Episode IV - A New Hope', 'Episode V - The Empire Strikes Back', 'Episode VI - Return of the Jedi', 'Episode VII - The Force Awakens', 'Episode VIII - The Last Jedi' ]
Defined in src/app/materials/drag-drop/drag-drop.component.ts:10
 
import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-drag-drop',
  templateUrl: './drag-drop.component.html',
  styleUrls: ['./drag-drop.component.scss']
})
export class DragDropComponent implements OnInit {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi'
  ];

  constructor() {}

  ngOnInit() {}

  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }
}
Copy
<mat-card>
  <mat-card-title>drap list</mat-card-title>
  <mat-card-content>
    <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
      <div class="example-box" *ngFor="let movie of movies" cdkDrag>{{movie}}</div>
    </div>
  </mat-card-content>
</mat-card>
Copy

./drag-drop.component.scss 

.example-list {
  width: 500px;
  max-width: 100%;
  border: solid 1px #ccc;
  min-height: 60px;
  display: block;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

.example-box {
  padding: 20px 10px;
  border-bottom: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  cursor: move;
  background: white;
  font-size: 14px;
}

.cdk-drag-preview {
  box-sizing: border-box;
  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);
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-animating {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

.example-box:last-child {
  border: none;
}

.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""