CODEWITHSUNDEEP
angularsassangular5angular-material2angular-cdk
jaredmahan
jaredmahan

Reputation: 86

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

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

Upvotes: 3

Views: 1322

Answers (1)

Paul ALBERT
Paul ALBERT

Reputation: 281

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>

Upvotes: 0

Related Questions