Drag & Drop - Angular Material 2 Experimental CDK - Reordering Horizontally Stacked Items

3
votes

I am working with the brand new drag and drop functionality that was just added to the Angular Material Experimental CDK. I am trying to stack drag-able items horizontally but when I do so it breaks the drag and drop functionality. Any ideas on what I am doing wrong?

Here is my stackblitz: https://stackblitz.com/edit/angular-basic-horizontal-drag-drop

1
angularsassangular5angular-material2angular-cdk
Figured this one out in another post: https://github.com/angular/material2/issues/12066 Looks like this functionality is still a work in progress – jaredmahan

1 Answers

0
votes

Those changes should solve your problem : https://stackblitz.com/edit/angular-basic-horizontal-drag-drop-ghggjt?file=app/drag-drop-example.ts

I upgraded every libs to their latest version and edited HTML to follow latest official specifications. ( you can find them here : https://material.angular.io/cdk/drag-drop/overview )

New HTML now looks like this : 

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