拖放-角度材料2实验性CDK-重新排序水平堆叠的物品

时间:2018-07-04 19:26:51

标签: angular sass angular5 angular-material2 angular-cdk

我正在使用刚添加到Angular Material Experiment CDK中的全新拖放功能。我试图水平堆叠可拖动的项目,但这样做会破坏拖放功能。 关于我在做什么错的任何想法吗?

这是我的闪电战:https://stackblitz.com/edit/angular-basic-horizontal-drag-drop

1 个答案:

答案 0 :(得分:-1)

这些更改应该可以解决您的问题: https://stackblitz.com/edit/angular-basic-horizontal-drag-drop-ghggjt?file=app/drag-drop-example.ts

我将每个库升级到其最新版本,并编辑了HTML以遵循最新的官方规范。 (您可以在这里找到它们:https://material.angular.io/cdk/drag-drop/overview

新HTML现在看起来像这样:

<div cdkDropList 
cdkDropListOrientation="horizontal" 
(cdkDropListDropped)="drop($event)" 
class="droplist">
<div *ngFor="let item of todo" cdkDrag>
  {{item}}
  <span class="drag-handle" cdkDragHandle >&#8596;</span>
</div>
</div>