Better support for adding containers dynamically

[abtx]

How can I add containers dynamically?

I get Cannot register container element more than once! when trying to add a new unique container when an element is added dynamically.

Is there built in support in Dragular for what I'm trying to do?

PS: I could do with a hack where I re-instantiate the Dragular instace

Below is my code for the function

  initDragularContainer($element, $scope, $timeout, dragularService) {
    dragularService($element.children().children().children(), {
      scope: $scope,
      copy: true,
      nameSpace: 'pois'
    });
  }

[luckylooke]

For now I think the reinit is the simplest option :/ The lib get robust during the time and the architecture was not prepared for it (my lack of experience, sorry).

It is possible by augmenting drake.containers and drake.containersCtx where drake.containers is object with nameSpaces as properties, default nameSpace is dragularCommon, I see that you are using custom nameSpace pois in your project, so your containers are keeped in array under drake.containers['pois']. You can make operations on this array, like adding new, removing, etc.. using all standard array methods, but you need also to sync this operations with drake.containerCtx which has same structure as drake.containers. Difference is that in containers there are just element references and in containersCtx, there are context objects. For each container element the context object is:

{
	o: o, // options object
	m: undefined, // model reference
	fm: undefined, // filtered model reference
}

where o is reference to options object provided on initialisation, so keep reference somewhere and reuse it. m and fm are optional and from your piece of code it seems that you dont use models, so you can leave them undefined

I can make helper functions addContainer, removeContainer for it. I will try in close future. But I am now spending most of the free time on another project, so cannot promise the deadline. Sorry :/

[abtx]

Thanks @luckylooke for your help, I appreciate. I will go and try play with the container arrays and will post the results here if I manage to make any significant progress. Cheers!

[abtx]

How would I deinitialize a Dragular element? Setting drake to null doesn't cut it

[abtx]

ok, so simply emptying drake.containers['pois'] and then using jQuery to get the containers again works just fine. This solves my problem I think

[abtx]

@luckylooke thanks for your help!!

[luckylooke]

I am glad you have found acceptable solution for you. I will keep this open until I implement those methods for better containers management. Thank you for your contribution.

[abtx]

@luckylooke not at all, thanks for keeping this awesome repo alive!

[mahendra2125]

Hi,
I am facing the same issue after getting the ajax response i would like to draw the dom. not able to procedd. could you please help out. I tried the solution you have provided but no luck.

[luckylooke]

@mahendra2125 could you please create plunker, or something I can see your scenario? Then I can help you, thanks ;)

[luckylooke]

@abtx hi! I have put there in drake helper methods, just released:
drake.addContainers()
drake.removeContainers()
For now just experimental, because I did not have time to test it corectly :/

Can you try them and let me know if they worked for you? Thanks

[gombosg]

They work nicely (at least for removeContainers()) - just please document that

• they use scope.$applyAsync (or change it to a maybe slower scope.$apply) because if I want to do something afterwards, I need to queue it using this function.
• drake.destroy() uses this function i.e. uses scope.$applyAsync

[luckylooke]

I will try to update it soon, but PR would be appreciated, thanks anyway :)