Перетаскивание с сортировкой возможно в Angular Material?

Question

Сценарий:

• Из Angular Material CDK версии 7.0.3 мы имеем сортировку с помощью перетаскивания.
  В этом Drag & Drop, везде в этом div мы можем щелкнуть и перетащить.

• Без щелчка повсюду будет кликать только значок и перетаскивать весь этот div.

• Теперь под примером вы можете щелкнуть и перетащить этот div везде, где я этого не хочу. я хочу только нажать на иконку и перетащить этот div с сортировкой.

Пример: https://stackblitz.com/edit/angular-by5l4g

URL приложения: https://angular -by5l4g.stackblitz.io

Answer 1

Демо с возможностью перетаскивания только div с иконки

Код приложения: https://stackblitz.com/edit/angular-drag-and-drop-example?file=src/app/app.component.ts

Подход:

• Изменить <i class="material-icons">reorder</i> на
  <i class="material-icons" cdkDragHandle >reorder</i>
• Использовал cdkDragHandle, чтобы сделать этот значок перетаскиваемым, удалил cursor: move из div и применил его к тегу <i>.

Обновление 1 (в соответствии с вопросом флажка):

• другой похожий тег <i> сохраняется как маска, которая не позволяет запускать перетаскиванием, если флажок не установлен, и при флажке флажок мы разрешаем этой маске исчезать, так что div можно перетаскивать из основного тега <i> .

Обновление 2 (в соответствии с вопросом об удалении и добавлении):

• добавлены функции удаления и добавления.