(Drag n drop) Dragula.js not working on revisiting the route (in ember.js app)

Question

I am using dragula.js library in an ember.js web app.

Things are working fine (able to drag and drop things) until I revisit the route, after which drag and drop just stops working, that is, can't drag anything that was previously draggable. And there are no js errors in console. Then, I refresh the page (from any route), it works again.

In short, the drag n drop works only for the first time when the route is visited/loaded.

Things I tried:

• Verified if the DOM items to be drag n dropped, are added to dragula's config.containers.
• Tried Rerendering the component from didInsertElement element inside the run loop running in afterRender.

didInsertElement(){ this._super(...arguments); Ember.run.scheduleOnce('afterRender', this, () => { let drake = window.dragula(this.getDraggableContainers(), this.get('dragulaConfig')); this.set("drake", drake); }

To me, it seems like the dragula library is initialized with all the required config, but I am baffled why its NOT working correctly after revisiting the route.

Any help/pointers would be greatly appreciated. Thanks!

Answer 1

I finally found some time to post an answer to my own question. Yay!

Reason:

The node references was invalid or to put in other words, could not be found in the DOM because the node references in my didInsertElement hook was pointing to the nodes created in the previous visit to the route and on each subsequent visits to the same route/page the DOM nodes are being recreated by ember (ofcourse :)).

Solution:

Instead of storing/caching the DOM node references, a fresh DOM node reference to the required nodes need to be fetched on each route visit. That way you'll always have valid node references.