Как сделать так, чтобы перетаскивание строк таблицы матов работало с cdkDragHandle, чтобы строка была перетаскиваемой только с помощью дескриптора?

Question

Я нашел этот пример стекаблика добавления drag-drop к мат-таблице с использованием углового cdk. Однако желаемое поведение заключается в том, что строку можно перетаскивать только с помощью элемента с директивой cdkDragHandle. В этом примере вы можете перетащить элемент, щелкнув в любом месте строки. Как это можно изменить, чтобы строку можно было перетаскивать только с помощью маркера перетаскивания?

https://stackblitz.com/edit/angular-igmugp

Answer 1

Я добился этого UX, применив cdkDrag к самому dragHandle вместо строки и используя cdkDragRootElement для идентификации строки.Он достигает UX перетаскивания через дескриптор, но все еще есть ошибка, которая препятствует фактическому переупорядочению после отбрасывания.

См. Stackblitz здесь.

ДокументацияЭлемент cdkDragRootElement здесь.

Вот ссылка на проблему Github по этому поводу.

Answer 2

Я нашел довольно простую проблему для этой сложной проблемы. Для любого простого текста td в перетаскиваемом tr мы можем использовать указатель-события: нет, и он отключит весь текстовый элемент.

На значке маркера используйте указатель-события: все, и он позволит перетаскивать только значок.

У этого также есть проблема, где он отключает все привязки и кнопки. Так что для иконки и кнопок сделайте следующее

1. используя mouseDown, установите флаг
2. при начале перетаскивания, проверьте событие мыши при перетаскивании
3. при остановке перетаскивания, проверьте, установлен ли флаг, сбросьте флаг и верните

проверить этот стекблит для рабочего ответа https://stackblitz.com/edit/angular-rwzc76

Answer 3

ИМХО, тут нет быстрых решений, кроме как взломать / переопределить исходный код Angular Material / CDK. Подтверждением тому является запрос на открытую функцию на github: https://github.com/angular/material2/issues/13770.

Проблема в том, что cdkDrag в источнике данных / MatTable автоматически создает аннотации перетаскивания для всех дочерних элементов (которые генерируют поведение) и не может (легко) быть переопределен.

На основании документации cdkDrag/cdkDragDisabled - cdkDragHandle/cdkDragHandleDisabled должно помочь (работает без таблицы). Я обновил все библиотеки из примера, чтобы поддержать их, но безрезультатно.