角度材质从列表拖到容器中答案

【问题标题】：Angular Material drag from list into container角度材质从列表拖到容器中
【发布时间】：2021-05-06 13:17:38
【问题描述】：

我正在尝试用棱角材料做一些看起来可行的事情，但我不确定。我有一个项目表，我希望能够将其从一个列表拖到另一个容器，但我不希望容器对列表进行排序，而是保留我将其放置到的位置。

我最初尝试这样做：

<div class="container" cdkDropListGroup>
  <div class="list-1" cdkDropList [cdkDropListData]="items" (cdkDropListDropped)="drop($event)">
    <ul>
      <li cdkDrag *ngFor="let item of items">
        {{item.name}}

        <div class="example-drag" *cdkDragPreview>
          {{item.name}}
        </div>
      </li>
    </ul>
  </div>
  <div class="list-2" cdkDropList [cdkDropListData]="done" (cdkDropListDropped)="drop($event)">
    <div class="example-drop" cdkDrag cdkDragBoundary=".list-2" *ngFor="let item of done">
      {{item.name}}
    </div>
  </div>
</div>

但这只是将其放入第二个列表并对其进行排序。那不是我想要的行为。这是一个堆栈闪电战，显示了我希望 second 容器的行为：

https://stackblitz.com/edit/angular-ivy-nc3wps

这是我尝试失败的示例：

https://stackblitz.com/edit/angular-ivy-4dcyd1

这是试图将两者结合起来：

https://stackblitz.com/edit/angular-ivy-m2ewfh

希望这些信息足以帮助我。

【问题讨论】：

标签： angular angular-material drag-and-drop

【解决方案1】：

您可以使用此属性禁用目标容器中的排序

cdkDropListSortingDisabled="true"

【讨论】：