乐趣区

关于angular:angular-拖动功能

jiezi

前言

写到表单性能的时候，就思考如果表单可能拖动式地增加，无疑可能增强用户的应用体验感。所以就尝试着实现拖动性能。如下图，可能将一个表单拖动到另一个表单。

环境配置

应用到了 angular 的 cdk：@angular/cdk/drag-drop

Angualr drag-drop 外面的性能能让咱们十分不便的解决页面上视图的拖拽 (自在拖拽、列表排序拖拽、列表之间拖拽) 问题。

官网：https://material.angular.io/c…

cdk 是 Angular Material 下的一个模块. 咱们装置一下 Material。

装置 material

ng add @angular/material

ng add 命令将装置 Angular Material、组件开发工具包 (CDK)

Module 导入

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

imports: [

...

DragDropModule

]

性能实现

讲一下最罕用的几种用法

拖拽

html 代码：
最次要的就是加上了 cdkDrag

<div cdkDrag> drag me</div>

成果：

排序

应用 cdkDropList，它增加在一组元素增加 cdkDrag 可拖动元素的汇合里面。随着元素的挪动，我的项目将主动重新排列。

html:

<div class="list-group" cdkDropList 
(cdkDropListDropped)="drop($event)">
  <div class="list-group-item row" *ngFor="let customer of customers" cdkDrag>
    {{customer.name}}
  </div>
</div>

ts:

drop(event: CdkDragDrop<string[]>) {moveItemInArray(this.customers, event.previousIndex, event.currentIndex);
  }

效果图：

当然还能够横向排序，只须要增加 cdkDropListOrientation=”horizontal”

<div class="box-list-horizontal" cdkDropList 
cdkDropListOrientation="horizontal">

增加动画

看起来下面的效果图有些不太好看，咱们能够给它增加一点动画。

css:

// 拖拽时显示的占位符元素，而不是理论的元素
.cdk-drag-placeholder {opacity: 0;}

// 从动画的地位到最终把它放在列表的地位上时的动画
.cdk-drag-animating {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

// 拖动元素时，看到的预览元素
.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);
}

// 拖动元素时，其余元素扭转地位看到的动画
.list-group.cdk-drop-list-dragging .list-group-item:not(.cdk-drag-placeholder) {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}

效果图：

还有其余的其余的一些性能将不再一一讲述，比方拖放地位锁定、设置拖放边界、拖放禁用性能。
能够看看官网：https://material.angular.io/c…

两个列表之间的拖拽

目前须要应用的是列表之间的拖拽，所以重点讲一下这个。

列表之间的连贯

应用 cdkDropListConnectedTo 和 id，能够连贯两个表，使它们之间可能拖动本人的元素到另一个表中。

<div cdkDropList id="list-one" [cdkDropListConnectedTo]="['list-two']"></div>
<div cdkDropList id="list-two" [cdkDropListConnectedTo]="['list-one']"></div>

也能够应用 cdkDropListGroup。cdkDropListGroup 在下的所有表都将主动连贯到所有其余列表。我采纳的是这种。

<div cdkDropListGroup>
  <!-- All lists in here will be connected. -->
  <div cdkDropList *ngFor="let list of lists"></div>
</div>

依据需要写代码

首先，定义了一个表，需要是：不能排序，另一个不能拖动元素到此表单

  <div class="row">
    <div class="col-2">
      <h2> 可用表单 </h2>
      <div
        cdkDropList
        [cdkDropListData]="availableItems" // 拖动时所带的元素
        cdkDropListSortingDisabled // 禁用排序
        [cdkDropListEnterPredicate]= "noReturnPredicate" // 定义了一个函数，返回 false, 示意别的表单不能拖动元素到此表单
        class="list-group">
        <div class="list-group-item" *ngFor="let item of availableItems" cdkDrag>
          <label> {{item.content}}</label>
        </div>
      </div>
    </div>
  </div>

定义了另一个表，需要是：能够排序，另一个表的元素拖动过去的时候，原来的元素不会隐没。

<div class="col-6">
      <h2> 目前表单 </h2>
      <div
        cdkDropList
        class="list-group"
        [cdkDropListData]="nowItem"
        (cdkDropListDropped)="dropNowList($event)">
        <div class="list-group-item row" cdkDrag *ngFor="let item of nowItem">
          {{item.content}}
        </div>
      </div>
    </div>

效果图：

ts:
当元素从右边的表拖动到左边的表的时候，或者左边的表排序的时候，左边的表会执行 dropNowList()函数。函数中进行了判断，如代码中正文所示

/**
   * 现有表单
   * @param event
   */
  dropNowList(event: CdkDragDrop<FormItem[], any>) {
    // 如果前容器等于现容器，阐明是在排序，替换元素的地位
    if (event.previousContainer === event.container) {moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else {
    // 如果不同，阐明是从另一个表过去的元素，获取元素前容器的数据，复制元素，插入到本表中
    // 如果应用 transferItem(), 则源元素会隐没
      copyArrayItem(
        event.previousContainer.data,
        event.container.data,
        event.previousIndex,
        event.currentIndex)
    }
  }

遇到的问题

动静渲染

其实最开始想的是，元素一拖过来就动静渲染。然而，动静组件是一个整体，咱们并不能拖动其中的某一个组件，只能拖动整体。如下效果图：

所以最初放弃了动静渲染，让用户拖动好了表单再点击预览按钮。

拖动成果

从一个表拖动元素到另一个表到时候，这个元素在源表中会隐没，尽管拖动过来之后会回来，然而看起来逻辑并不好。

示例：

所以须要实现的是，拖动元素的时候，这个元素在源表单不动。

但仿佛 DragModule 并没有属性或者函数能够让咱们调用来解决这个问题。

在 github 有一场对这个问题的大型探讨：
https://github.com/angular/co…

但仿佛实现起来有点麻烦。

这个问题目前还不影响性能的实现，待前期有工夫的时候再解决。

退出移动版