6

I've got a problem with the Drag and Drop Feature of the Angular Material CDK. I'm trying to use nested DropLists which can be nested arbitrary deep. It is not possible to drag items into the third level of the DropLists. In addition to this the items jump back and forth when dragging from the first to the second level.

The workaround from here fixed the issue with the jumping items from the first to levels. But it doesn't fix the issue of dropping items into the third layer.

I've coded a minimal and a more complex example to show the problems.

Code

In the complex example removing the items from the DropLists doesn't work (seems to be a problem with the model not refreshing the UI, so nevermind. I'm trying to fix it soon.). The complex example includes more encapsulated components. The simple one is just two components that are handling the Drag and Drop. The simple example includes the workaround mentioned above, which fixes the jumping between the first and the second level.

I expect, when dragging the 2 in the simple example to the drop-area of Composite 1.1 (between Leaf 1.1.1 and Leaf 1.1.2), the item to drop into Composite 1.1. But this does not happen. In addition to that the item jumps back and forth, when its over the Composite 1.1 box. Maybe someone has an idea how to fix this...

Edric
  • 24,639
  • 13
  • 81
  • 91
Timo
  • 90
  • 10
  • I asked the other question, and I'll be having a look at this again soon. My new idea involves not using nested data, but having the data set out in a flat array, similar to how NGRX entities deals with it: { ids: [1,2]. 1: { children: [3,4] }, 2: { children: [] }, 3: { }, 4: {} } -- Then when displaying the data I need to calculate how far the depth of that item is as well as whether or not it's visible based on it's parents visibility. – acandylevey Jan 31 '19 at 03:54

0 Answers0