Angular: перетаскивание для деревьев - настройка

Question

Насколько я понимаю, новый Angular 7 предоставляет функции перетаскивания.Я искал компонент Tree о DnD, но не нашел много связанных с деревьями.

Один рабочий пример, который я нашел на Stackblitz .По сравнению с возможностями drag'ndrop, которые суммированы , здесь решение выглядит трезвым.Один лучший пример связан с ngx-tree-dnd .Тем не менее, поскольку я хочу придерживаться Материала, возникает некоторая q:

1. Как заставить регулярное Угловое дерево иметь некоторые похожие побочные эффекты?т.е. отображать содержимое узла при перетаскивании.
2. Есть ли способ визуально отобразить его лучше, если я уроню узел на том же уровне или на одном уровне глубже / выше?Потому что с текущим дисплеем трудно узнать, на какой уровень перемещается
3. Как включить некоторые анимации?

Answer 1

После некоторого изучения кода и возни, я наконец-то понял, как его улучшить.Я публикую свое решение на StackBlitz на случай, если кто-то еще захочет внести дополнительные корректировки.

Основные проблемы, которые я исправил:

1. Для изображения было выбрано значениеnull - не знаю, почему
2. Я увеличил область перетаскивания - поэтому теперь она также охватывает поля (отступы)
3. Я окрашиваю узел, где начинается выделение
4. Корректировка цвета может быть легко сделана в CSS
5. . Я попытался решить проблему с производительностью.Один из подходов заключается в использовании чисел вместо строки.Но я думаю, что могут быть дополнительные улучшения.

Я понял, что главное в DnD заключается в том, что большая часть этой части - простой код JS.Не сильно приправлено особенностями Angular.

Предложения по улучшению приветствуются.