2020-03-18

https://material.angular.io/cdk/drag-drop/api

<div class="example-box" cdkDrag>
    Drag me around
</div>

<div cdkDrop>
    drop
    <div class="box" cdkDrag>
        Drag me around
    </div>
</div>

<div class="example-container">
    <h2>To do</h2>

    <mat-selection-list cdkDropList 
    #todoList="cdkDropList" 
    [cdkDropListData]="todo" 
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list" 
    (cdkDropListDropped)="drop($event)">
        <!-- <div class="example-box" *ngFor="let item of todo" cdkDrag>{{item}}</div> -->
        <!-- <mat-selection-list #shoes  (selectionChange)="toggleExport($event.option)" cdkDrag> -->
            <ng-container *ngFor="let shoe of qiu">
                <div cdkDrag>
                    <mat-list-option  [value]="shoe">
                        {{shoe}}
                       </mat-list-option>
                </div>
               
            </ng-container>
            
          <!-- </mat-selection-list> -->
    </mat-selection-list>
</div>

<div class="example-container">
    <h2>Done</h2>

    <div cdkDropList 
    #doneList="cdkDropList"
    [cdkDropListData]="done" 
    [cdkDropListConnectedTo]="[todoList]"
        class="example-list" (cdkDropListDropped)="drop($event)">
        <div class="example-box" *ngFor="let item of done" cdkDrag>{{item}}</div>
    </div>
</div>

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<string[]>) {
        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;
  }