Draggable sortable images loose their sortable property on update of different client

Hi all
Could someone please support me in solving the following issue?
I created a meteorpad that demonstrates the setup.
(works with Firefox, but not with Chrome, don’t know why)

The actual problem occurs on concurrent access of several clients. If images are dragged from one collection to the other, then the related mongo items correctly move between collections and the view updates on all connected clients, but the dragged image looses its sortable property on all other clients but the one that dropped it.
The sortable property returns when the browser is refreshed or when another image is moved.

Maybe, I have to somehow manually connect an updated image on other clients to the DOM as soon as it appears at its new position, but how to do this?

I appreciate your support.

Greets!
Helge

I’m on Chrome right now, so I can’t really see it in action, but in my experience, depending on how much action is going on in the dom, you will probably have to call your $().sortable function again. New objects dropped into your dom won’t automatically inherit the abilities of a sortable element just because they share the class name.

Hi Sean!
Thank you, your hint was fully correct.:+1:

I added a few lines to attach .sortable to items on mouseenter, see meteorpad:
Template.moveBetweenCollections.events({ 'mouseenter .item': function (event) { initSortable('.sortable'); } });

Works well, but looks like a workaround.
Actually, I am a bit surprised that this is not handled automatically by Meteor. It is a common use case that clients receive changes in their collections and update the view.
What other solutions exist for correctly embedding updated elements in the DOM?

Greets!
Helge

@hekrie Glad it helped!

Regarding the workaround – the jQuery sortable code assumes that whatever you have in the dom at the time of init – usually a $(document).ready() call or something similar – is all you need to sort.

When you have items popping into the dom on data/subscription changes, then the init event that fired on the doc.ready call is outdated, because those elements weren’t present when you made the sortable call. You could attach your sortable call to an autorun subscription function or something similar. Depends on what makes the most sense in your app.