时间戳

首页 > 解决方案 > 如何限制拖放容器仅接受Angular Material Drag-Drop Feature中的一项

angular - 如何限制拖放容器仅接受Angular Material Drag-Drop Feature中的一项

问题描述

使用 @angular/cdk/drag-drop 模块（Angular Material Drag and Drop）时...有没有办法限制放置容器以便只接受一个值而不是多个值？我正在尝试创建表单，用户可以将图像拖放到应该只有一个项目的字段中。我正在使用标准示例代码来实现 拖放 | Angular Material，但找不到可以限制放置项目数量的解决方案，其次找不到保持拖动列表相同的解决方案（拖动的项目将保留在拖动容器中），因此您复制而不是将项目移动到放置容器。是否有任何解决方案或可以帮助提供示例代码的人？

HTML：

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

  <div
    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>
  </div>
</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>

TS：

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

/**
 * @title Drag&Drop connected sorting
 */
@Component({
  selector: 'cdk-drag-drop-connected-sorting-example',
  templateUrl: 'cdk-drag-drop-connected-sorting-example.html',
  styleUrls: ['cdk-drag-drop-connected-sorting-example.css'],
})
export class CdkDragDropConnectedSortingExample {
  todo = [
    'Get to work',
    'Pick up groceries',
    'Go home',
    'Fall asleep'
  ];

  done = [
    'Get up',
    'Brush teeth',
    'Take a shower',
    'Check e-mail',
    'Walk dog'
  ];

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

标签： angularangular-materialangular-dragdrop

解决方案

这是我的版本的工作演示，允许覆盖。

确保您的屏幕足够宽，您可以看到两列。

你应该使用cdkDropListEnterPredicate

如果您的目标“插槽”已被填满，只需从这里返回 false。

请注意，您的处理程序是从this不是您的组件的上下文中调用的。所以你需要在你的组件中使用这样的 lambda 函数。

destinationNotEmptyPredicate = () => 
{
   return this.destinationArray.length == 0;
};

确保目的地列表有一个高度，以便您可以在其中实际放置一些东西。

但是，如果您需要允许覆盖“假列表”中的现有单个项目（并且您可能会这样做），那么它会有点棘手。您不想使用此谓词（因为它会阻止您删除任何内容，除非您首先删除现有项目）。

所以在这种情况下，你需要做一个 CSS 调整来隐藏已经存在的项目（当你将鼠标悬停在它上面时）。

#even 是目标列表。

#even.cdk-drop-list-dragging .cdk-drag:not(.cdk-drag-placeholder) {
   display: none;
}

还设置[cdkDropListSortingDisabled]="false"为避免奇怪的动画故障。

当您“删除”该项目时，您的目标列表应仅包含一项：

drop(event: CdkDragDrop<number[]>) {
    if (event.previousContainer === event.container) {
      moveItemInArray(
        event.container.data,
        event.previousIndex,
        event.currentIndex
      );
    } else {
      this.even = [event.item.data];
    }
  }

请注意我如何仍然使用cdkDropListEnterPredicate这里来只允许删除偶数。

推荐阅读