Drag & Drop - Угловой материал 2 Экспериментальный CDK - Переупорядочивание горизонтально сложенных предметов

Question

Я работаю с новой функциональностью перетаскивания, которая была только что добавлена ​​в Angular Material Experimental CDK. Я пытаюсь сложить перетаскиваемые элементы горизонтально, но когда я это делаю, это нарушает функциональность перетаскивания. Есть идеи, что я делаю не так?

Вот мой стек: https://stackblitz.com/edit/angular-basic-horizontal-drag-drop

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