3 Levels Nested ngRepeat with Model

[JerimSD]

Hi,

I am working on a project where I need to give to the user the ability to drag and drop several items. The structure is always the following:
Rows contain Columns which contain Components.
Rows can be reorganized between them as the user wishes.
Columns can be reorganized inside their original row or moved to another.
Components can be reorganized inside their original column or moved to another.

All Rows, Columns and Components come from an object "resource" and are dynamically generated with ngRepeat in the view side.

I started to implement a drag and drop with the angularjs-dragula library but when it came to implement nested containers I hit a wall (several times). Then I found your library, which seems to be exactly what I need but unfortunately I can't make it work.

I followed the documentation and the exemples provided but I don't understand how to use the service properly. I recreated my project basis in a Plunker : https://plnkr.co/edit/7NB4KKmM0QAiwSlhYYBj

If somebody could to take a look at my code and give me some advice, I would be very grateful.

[JerimSD]

I changed a few things in my code and now I have something almost fully working.
Rows and Columns can be dragged and dropped correctly with the model always synced. But there's a few things I don't understand.

When I want to move a Component (a 3rd level item) :

• sometimes the Component can not be dragged at all.
• sometimes the Component disappear if dragged and dropped at the same position, and reappears if I move the column somewhere else, or if I drop another Component in that "empty" column.

Here's an updated Plunker : https://plnkr.co/edit/7NB4KKmM0QAiwSlhYYBj

Again if somebody has any advice, I'll take it.

[luckylooke]

I will look at it soon,.. on thursday seems to be real, thanks for patient and using lib ;)

[luckylooke]

It seems to be a bug, I will investigate it during this week. Thanks for patience ;)

[luckylooke]

I have found that this is implementation problem. Library gets containers for first time as HTMLCollection but the environment (nested containers) is dynamically changed and library still refers to original collection with initial order of containers. So only solution which comes to my mind is to allow containers to be function so container elements will be provided dynamically. So instead of {containers: document.querySelectorAll('.ctnColumn')} you will provide fn {containers: function(){ return document.querySelectorAll('.ctnColumn')}}. I will let you know when this will be implemented ;)

[JerimSD]

Great, I will be waiting for your next release.
Thank you for your consideration.

[luckylooke]

I have implemented what I have mentioned in previous post, but it is not enough :/ because in this dynamic nested environment newly generated container elements by ng-repeat are loosing their mousedown listeners, so I need to find out how to effectively readd listeners to placed containers. 🤔

[luckylooke]

Bad news.. I have been working on this several hours and I have not found the way to fix this without massive rewrite of core functions.. If I will get some new idea, I will try again, but for now dragular seems to be not suitable for nested containers with models. :/ I am working on new drag&drop lib, and when I finish it I will replace the core of dragular by new one. Until the I will let this issue open to be visible for others. Thanks for understanding.

[JerimSD]

Alright, I'll be waiting for your new drag&drop library then. Meanwhile I developed a little tweak for the project I work on.
I ask the user to save the model each time he has to add a new container. Then I make him reload the DOM. I can't work on this for a few weeks, I'll find something better as soon as possible.
Anyway, thank you.

[diosney]

@JerimSD I struggled recently with this very same issue, and tested dragulajs, angularjs-dragula, this dragular library and I couldn't test dragon since it is not yet production ready and ended up coming back to angular-ui-tree https://github.com/angular-ui-tree/angular-ui-tree.

This is very late to the party, I know but maybe for future projects you can use it :)

[JerimSD]

Well it seems pretty good. Maybe we'll update our application with this.
Thanks.