Angular 拖拽功能之cdk-- drag-drop

Angualr drag-drop里面的功能能让我们非常方便的处理页面上视图的拖拽(*拖拽、列表排序拖拽、列表之间拖拽)问题。

官网：https://material.angular.io/cdk/drag-drop/examples。

首先使用之前使用之前一定要先在当前组件的modules中导入DragDropModule 模块。（也适用于子模块）。

app.modules.ts导入

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

imports: [

DragDropModule

]

1、最简单的拖拽用例。

<div cdkDrag class="drag-box"> drag me</div>

2、排序

    <h3>列表排序</h3>
    <div class="box-list" cdkDropList (cdkDropListDropped)="drop($event)">
        <div class="drag-box" *ngFor="let customer of customers" cdkDrag>
            {{customer.name}}
        </div>
    </div>

    import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
     
    customers = [
    { name: 'Adam', age: 23 },
    { name: 'Jack', age: 27 },
    { name: 'Katherin', age: 26 },
    { name: 'John', age: 30 },
    { name: 'Watson', age: 42 },
    ];
     
    drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
    }

也可以控制拖拽的方向

<div cdkDropList cdkDropListOrientation="horizontal" class="example-list" (cdkDropListDropped)="drop($event)">
          <div class="example-box" *ngFor="let timePeriod of timePeriods" cdkDrag>{{timePeriod}}</div>
      </div>

cdkDropListOrientation="horizontal" 控制只能水平拖动。

3、两个拖拽框之间的数据交换

       CdkDropList指令cdkDropListConnectedTo属性的使用。同时为方便大家的使用cdk drag-drop也给提供了transferArrayItem()、moveItemInArray()用于两个list之间交互item和单个list之间item位置变换。

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

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

export class DragDropTransferringItemComponent {

    /**
     * 左边类别数据源
     */
    leftSource = [
        'Get to work',
        'Pick up groceries',
        'Go home',
        'Fall asleep'
    ];
    /**
     * 右边列表数据源
     */
    rightSource = [
        'Get up',
        'Brush teeth',
        'Take a shower',
        'Check e-mail',
        'Walk dog'
    ];
    /**
     * 拖动的时候，list交换item或者单个list里面item位置的变换
     * @param event
     */
    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);
        }
    }
}

还可以控制两个拖拽框相互拖进去的元素

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

@Component({
  selector: 'app-drag-drop-controlling-with-item',
  template: `
      <div class="example-container">
          <h2>不接受其他list的数据</h2>
          <div
                  id="all"
                  cdkDropList
                  [cdkDropListData]="all"
                  cdkDropListConnectedTo="even"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)"
                  [cdkDropListEnterPredicate]="noReturnPredicate">
              <div
                      class="example-box"
                      *ngFor="let number of all"
                      [cdkDragData]="number"
                      cdkDrag>
                  {{number}}
              </div>
          </div>
      </div>

      <div class="example-container">
          <h2>只接受其他list里面的偶数</h2>
          <div
                  id="even"
                  cdkDropList
                  [cdkDropListData]="even"
                  cdkDropListConnectedTo="all"
                  class="example-list"
                  (cdkDropListDropped)="drop($event)"
                  [cdkDropListEnterPredicate]="evenPredicate">
              <div
                      class="example-box"
                      *ngFor="let number of even"
                      cdkDrag
                      [cdkDragData]="number">{{number}}
              </div>
          </div>
      </div>
  `,
  styles: [`
      .example-container {
          width: 400px;
          max-width: 100%;
          margin: 0 25px 25px 0;
          display: inline-block;
          vertical-align: top;
      }

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

      .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);
      }

  `]
})
export class DragDropControllingWithItemComponent {

    all = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    even = [10];

    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);
        }
    }

    /** 只接受其他list里面的偶数 */
    evenPredicate(item: CdkDrag<number>) {
        return item.data % 2 === 0;
    }

    /** 不让其他list里面的数据移入到这个里面来 */
    noReturnPredicate() {
        return false;
    }

}

上面就是常见的一些功能，更为详细的功能见官网https://material.angular.io/cdk/drag-drop/examples。

参考博客：

https://www.jianshu.com/p/7bed07770131。