如何在Angular 7中禁用目标cdkDropList中的元素移动/移动

在Angular 7中禁用目标cdkDropList中的元素移动/移动，可以通过以下步骤实现：

1. 首先，确保你已经安装了Angular Material和CDK（Component Dev Kit）。如果没有安装，可以通过以下命令进行安装：

npm install --save @angular/material @angular/cdk

1. 在你的组件中，导入必要的模块：

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

1. 在组件的HTML模板中，使用cdkDropList指令来创建一个可拖拽的容器，并设置cdkDropListDisabled属性为一个布尔值来控制是否禁用元素的移动/移动。例如：

<div cdkDropList [cdkDropListDisabled]="isDisabled" (cdkDropListDropped)="onDrop($event)">
  <div cdkDrag *ngFor="let item of items">{{item}}</div>
</div>

1. 在组件的类中，定义一个布尔变量isDisabled来控制是否禁用元素的移动/移动。例如：

isDisabled: boolean = false;

1. 在组件的类中，实现onDrop方法来处理元素的移动/移动事件。在该方法中，你可以根据需要对元素进行处理，例如重新排序数组或移动元素到另一个容器。以下是一个示例：

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

在上述示例中，event.previousContainer表示之前的容器，event.container表示当前的容器，event.previousIndex表示元素在之前容器中的索引，event.currentIndex表示元素在当前容器中的索引。

这样，当isDisabled变量为true时，目标cdkDropList中的元素将被禁用移动/移动。当isDisabled变量为false时，元素将可以自由移动/移动。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供可扩展的云服务器实例，适用于各种计算需求。了解更多信息，请访问腾讯云云服务器。
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于存储和处理大规模非结构化数据。了解更多信息，请访问腾讯云对象存储。