Dynamic containers

[joshting]

Hi,

I am trying to implement a form builder interface using the dragular. It was fine when the containers are fixed but when I started to work on layouts which require containers to be dynamically created, I got into problems. I am not sure where the problem lies. For example, I have container A where I drop form fields into. Then I want to drop a 2 columns container AA into A. Now AA is a child of A which has 2 containers side by side. I can still drop items into A but not into the two containers in AA. Is it because AA is a child of A which is already a container?

Thanks,
Josh

[luckylooke]

You are dealing with nested containers, dragular can handle this with your support. Look at this example and the code at the bottom. It can help you.

Notice!: If you want to filter that models you can meet some troubles. Then you can find some info here but it is messy a bit.

[joshting]

Thanks for the info.

I got an idea on refreshing containers and containersModel using dragularService after adding a nested container dynamically. The main problem seems to be the indexing that is out of place.

The idea is something like this:

A can contain B
(B has Bb within its template)
Bb can contain C
B can be added dyamically

So we have:
dragularService('#A,#B', {
containersModel: [A_container, B_container]
// some options
}

dragularService('#Bb1,#Bb2 ...,#C, {
containersModel: [A_container, B_container1, B_container2 ...]
// some options
}

The '#Bb1,#Bb2 ... and B_container1, B_container2 ... are generated through a service each time B is dynamically added and the above code is rerun (after a cleanEnviroment).

I have tried but it doesn't work. I can add Bs but Bb unable to contain Cs. If I attempt to drag a C into Bb, the entire interface no longer work. I also get following error:

Uncaught TypeError: Cannot read property 'parentNode' of null
at E (dragular.js:1307)
at J (dragular.js:779)
at HTMLHtmlElement.B (dragular.js:450)
at HTMLHtmlElement.dispatch (jquery.js:4737)
at HTMLHtmlElement.elemData.handle (jquery.js:4549)

[luckylooke]

Could you copy your code somewhere public I can play with it? Like codepen, jsfiddle, etc... thanks ;)

[luckylooke]

closing due to inactivity