如何限制拖放容器只接受角材料拖放功能中的一个项目

Question

使用@angular/cdk/拖放模块（角度材质拖放）时。。。有没有办法限制drop容器只接受一个值而不是多个值？我试图创建一个表单，用户可以将图像拖放到只有一个项目的字段中。我使用标准示例代码来实现拖放| Angular Material，但无法找到可以限制拖放项目数量的解决方案，第二个无法找到保持拖放列表不变的解决方案（拖放项目将保留在拖放容器中），因此您可以复制项目，而不是将项目移动到拖放容器中。是否有任何解决方案或人员可以帮助编写示例代码？

超文本标记语言：

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

Answer 1

另一个解决方案是将[cdkDropListData]=“[]”设置为硬编码的空列表。从cdk的角度来看，这是一个列表，但实际上并不适用于你的应用程序。

然后，您只需在该位置显示您想要的任何内容（如果项目已设置），并处理cdkDragDrop事件来更新它。

    <div class="slot"        
         cdkDropList
         [cdkDropListData]="[]"
         (cdkDropListDropped)="drop($event)">

       <!-- display your item here with *ngIf -->

    </div>


.slot
{
   min-height: 50px;
}

Answer 2

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

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

您应该使用cdkdroplisterpredicate

如果您的目的地“槽”已满，则从此处返回false。

请注意，您的处理程序是从一个上下文中调用的，此不是您的组件。因此，您需要在组件中使用类似的lambda函数。

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

确保目的地列表有一个高度，这样你就可以在其中放置一些东西。

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

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

#甚至是目的地列表。

#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];
    }
  }

请注意，我仍然在这里使用cdkDropListENPredicate来只允许删除偶数。

Answer 3

好的，这应该行得通：

movementCount: number = 0;

drop(event: CdkDragDrop<string[]>) {
   if (event.previousContainer === event.container) {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    } else if(this.movementCount === 0){
       this.movementCount++;  // block next object from being moved
       // copy obj being moved
       var movingObj = event.previousContainer.data[event.previousIndex];

       transferArrayItem(event.previousContainer.data,
                    event.container.data,
                    event.previousIndex,
                    event.currentIndex);

       // transfer complete so copy object back
       event.previousContainer.data.push(movingObj);    
  }
}

我使用了一个计数器来确定移动是否被允许，但是布尔值也同样有效（更好）。您只需要添加额外的代码，这样当图像从它携带到的div中移除/删除时，计数器将返回到零/假，以便在需要时可以拖动另一个图像。

希望有帮助。