CODEWITHSUNDEEP
angularangular-material
LeO
LeO

Reputation: 5238

Angular: Drag and drop for trees - customisation

To my understanding the new Angular 7 provides Drag and Drop features. I searched for the Tree component about the DnD but didn't find much related to trees.

One working expample I've found on Stackblitz. Compared with the drag'ndrop features summarized here the solution looks sober. One better sample is related with ngx-tree-dnd. Nevertheless since I want to stick to Material some q arise:

  1. How to make the regular Angular tree have some similar ghosting effects? i.e. Display the node content while dragging around.
  2. Is there a way to visually display it better if I drop the node on the same level or one deeper/upper? Cuz with the current display it is hardly recognizable onto which level the moved
  3. How to include some animations?

Upvotes: 5

Views: 7378

Answers (1)

LeO
LeO

Reputation: 5238

After some investigation of the code and fumbling around I figured finally out how to make it better. I post my solution on StackBlitz in case somebody else wanna make additional adjustments.

Major issues I've fixed:

  1. The image for dropping was set to null - no idea why
  2. I increased the drag and drop area - so it covers now as well the margins (paddings)
  3. I color the node where the selection starts
  4. Adjustements about the colors could be easily done in the CSS
  5. I tried to fix perfomance issue. One approach is to use numbers instead of string. But I guess there could be additional improvements.

I figured out that the major thing about DnD is that most of the part is plain JS code. Not much spiced up with Angular specifics.

Suggestions about improvements welcome.

Upvotes: 8

Related Questions