Draggable: $.ui.ddmanager.current not released on draggable _destroy

[eshcharc]

In the days of client side frameworks and SPAs, considerations need to be made regarding client side page switch and optimizations and cleaning of assets.

When we examined and profiled our SPA on a page switch scenario, we've noticed that a jQuery-UI plugin is holding a whole element tree. A further examination led us to a draggable and the "global" $.ui.ddmanager.current.

It seems that when a draggable is being destryed via _destroy, $.ui.ddmanager.current which is linked to this draggable, is not taken care of and keep a reference to the draggable and all of its tree elements. When a client side framework is involved, that makes it worse.

That can quite easily be treated.

[merildev]

Same problem here.

I use Backbone for my SPA, when the view which contains the draggable element is closed, the DOM tree should be deleted. However, I can see a leak and my view appears as a detached DOM tree with some references in the JS code (jQuery UI).

Quick and dirty solution: If I do a 'delete $.ui.ddmanager.current;' when the view is closed, the reference is removed and the garbage collector is able to delete the DOM nodes.

[Eli Flanagan]

I have observed this in an ember.js application (v2.12.2). The feature in question was too complex to easily reproduce in ember-twiddle. The workaround mentioned by merildev did not work for us. Instead I had to add following function and invoke after the user initiated the state that caused the orphaned widget element:

function garbageCollectWidget() {
	try {
		const el = jQuery.ui.ddmanager.current.element;
		el.off();
		el.remove();
		delete jQuery.ui.ddmanager.current.element;
	} catch (err) { } //eslint-disable-line no-empty
}