Removing elements from DOM doesn't destroy sortable

[dwelle]

When a sortable is bound to group which is later removed from DOM ($.remove() or simply replaced), sortable is still bound to it if it's not manually destroyed before removing the elements from DOM. This messes up sortable when it's later bound to that group again.

Related to #99, and #94

If nothing else, it would be great to be able to destroy all sortables (or particular group). Calling sortable('destroy') on those non-existent DOM elements is futile.

JSFiddle here

[johnny]

Why are you not able to call sortable('destroy') before you remove the dom elements?

[dwelle]

I can, but then a simple task of binding a sortable to some DOM element will consist of having to make sure that every case which leads to removing that element from DOM is preceded by calling sortable('destroy') on it, first.

I don't know where you store group info, but since your events are in jQuery cache, they are removed when you call .remove() on the DOM elements. Any other data your plugin associates with the DOM elements should be removed as well.

In any case, current behavior is very unintuitive, and at the very least, should be documented.

[cigzigwon]

Are you using a library like Ember, Angular OR React? Sounds like a spaghetti problem. Try to use a library to help you manage your objects.

[juliankigwana]

I have precisely the same problem and before you ask, it is not spaghetti code.

The first time the backbone view renders everything works as planned. However subsequent renders are problematic because the original grouped lists have not properly been removed from memory.

I have found a workaround which is to change the name of the group each time the view is rendered, however this does not solve the underlining problem which @dwelle has highlighted, as well as leaving concerns of a possible memory leak.

That aside, I have to say that this is definitely the best sortable plugin I have used. Thank you.

[johnny]

I would like to nail this once and for all.

Can you tell me what version you are using.

If you can provide a minimal version on jsbin or similar, fixing it will be
easier.

On Tue, Jul 29, 2014 at 3:31 PM, Hoolagon [email protected] wrote:

I have precisely the same problem and before you ask, it is not spaghetti
code.

The first time the backbone view renders everything works as planned.
However subsequent renders are problematic because the original grouped
lists have not properly been removed from memory.

I have found a workaround which is to change the name of the group each
time the view is rendered, however this does not solve the underlining
problem which @dwelle https://github.com/dwelle has highlighted, as
well as leaving concerns of a possible memory leak.

—
Reply to this email directly or view it on GitHub
#106 (comment)
.

[dwelle]

There's a JSFiddle in my original post.

[lsh123]

Same issue: jquery-sortable.js v0.9.12 with jquery 2.1.1 and bootstrap 3.2.0. I even call 'destroy' but global state is persisted somewhere and "old" callbacks (e.g. onDrop) are called. I fixed the issue by adding the timestamp to the group name which is a clear indicator of some kind of state leftover.

[juliankigwana]

It's jquery-sortable.js v0.9.12 with backbone 0.9.2. However I don't think the frame work has anything to so with it. Dwelle's original JSFiddle describes the problem sufficiently.

[alex-kozlov-wearehere]

My solution to that problem as a library user was to:

1. Get http://jquerypp.com/#destroyed
2. Right after i create sortable - attach 'destroyed' handler and call destroy from it.
   $element.sortable(),
   $element.on('destroyed', function() { $(this).sortable('destroy'); });

It helped - now i can reload parts of html using ajax and reinitialize sortable with new data.

[mujeebasif]

here is working updated fiddle http://jsfiddle.net/SmRM2/8/
just changed
from

$("ul").sortable({
group: 'one'
})

to

$("ul").sortable({
group: Date.now()
})

for different group.
as suggested in other issues referred by you.

[petrdvorak]

@mujeebasif This is a funny solution to the problem, but fairly enough - it helped me to workaround the issue.