拖放 - 角度材料2实验CDK - 重新排序水平堆积项目

Question

我正在使用刚刚添加到Angular Material Experimental CDK的全新拖放功能。 我试图水平堆叠可拖动的项目，但是当我这样做时它打破了拖放功能。 关于我做错了什么的任何想法？

这是我的stackblitz： https ：//stackblitz.com/edit/angular-basic-horizo​​ntal-drag-drop

Answer 1

这些更改应该可以解决您的问题： https ： //stackblitz.com/edit/angular-basic-horizo​​ntal-drag-drop-ghggjt？file = app / drag-drop-example.ts

我将每个lib升级到他们的最新版本并编辑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>