2020-03-18

[https://material.angular.io/cdk/drag-drop/api](https://material.angular.io/cdk/drag-drop/api) ~~~

Drag me around

drop

Drag me around

To do

{{shoe}}

Done

{{item}}

~~~ ~~~ import { Component } from '@angular/core'; import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; enum ExportFlag { export1, export1 export1, export1, length, } @Component({ selector: 'app-root', templateUrl: './drag-test.component.html', styleUrls: ['./drag-test.component.css'], }) export class DragTestComponent { title = 'hello-world'; qiu = Array.from(ExportFlag); todo = [ 'todo1', 'todo2', 'Go home', 'Fall asleep' ]; done = [ 'done1', 'done2', 'Take a shower', 'Check e-mail', 'Walk dog' ]; drop(event: CdkDragDrop ) { console.log('_________ event: ', event); 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); } console.log('_________ todo: ', this.todo); } toggleExport(e) { console.log('_____________ ', e); } } ~~~ ~~~ .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; background-color: black; } .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); background-color: greenyellow; } .cdk-dragging { color: yellowgreen; background-color: violet; } .cdk-drag-preview { background-color: yellow; flex-direction: row-reverse; display: flex; align-items: center; padding: 0 16px; height: inherit; color: red; } .mat-list-text { width: 100%; } .mat-list-item-content { flex-direction: row-reverse; display: flex; align-items: center; padding: 0 16px; height: inherit; } .cdk-drag-preview:first-child { flex-direction: row-reverse; display: flex; align-items: center; padding: 0 16px; height: inherit; } div.mat-list-item-content.mat-list-item-content-reverse { flex-direction: row-reverse !important; display: flex !important; align-items: center; padding: 0 16px; height: inherit; } .cdk-drag-preview:first-child:nth-child(3) { width: 100% !important; } mat-list-option { width: 100% !important; } ~~~