Sortable leaves unwanted elements

[screamer49]

After sorting some elements I call a function on drag:stop and check my container to snags some ids so I can write back the new order to a database. It appears that the clean up (of the mirror element?) hasn't happened yet because I get duplicate ids. Is there a way around this problem? Perhaps an event I can use for after the clean up has happened? Any help is really appreciated.

[beefchimi]

eeep... mirror:destroy is a more appropriate event, but even that is getting fired before the mirror gets removed from the DOM 😬

For now @screamer49 , you could use mirror:destroy and simply filter out the single occurrence of .draggable-mirror.

@tsov perhaps we should offer a new "end of lifecycle" event - something that gets called at the VERY END, when all draggable operations have completely finished. drag:completed perhaps? Unless you have a better solution in mind...

[screamer49]

@beefchimi Thanks for the response. I just implemented your suggestion and got it working. Much appreciated, sir.

For what it's worth, I think the drag:completed event would be an excellent addition.

[tsov]

@screamer49 Yes, that's been an annoying side-effect 😕 You could also use the sortable:stop event, which gives you oldIndex and newIndex, as well as oldContainer and newContainer, to figure out how elements have been sorted. Here the docs: https://github.com/Shopify/draggable/blob/master/src/Sortable/SortableEvent/README.md#sortablestopevent

Alternatively you could use the getDraggableElementsForContainer method defined here: https://github.com/Shopify/draggable/blob/master/src/Draggable/Draggable.js#L324 which returns draggable/sortable elements in the right order, without any unwanted elements (without mirror and original element). You could use that method in the drag:stop or sortable:stop event to get the correct elements and in order.

Rather than adding another event, maybe we could add the current order of elements to the sortable:stop event itself?

[AnwarShahriar]

@screamer49 isn't there still n+1 element even after you filter out the .draggable-mirror on mirror:destroy event? I was actually trying to understand your problem. If possible and not too much to ask, do you have any sample code or reproduction step for this issue? It'd be really helpful for me, as I'm trying to understand the issue and studying this library. I'm new to oss contribution, so trying to figuring things out.

[jbeliezVega]

Hello @tsov On the sortable:stop or mirror:destroy event, I try to get the list in the right order with e.newContainer.children, but it gives me a list with 2 unwanted elements, and not in order.

There is a Codepen https://codepen.io/jbeliezVega/pen/JmGOVG

In this example, the returned HTMLCollection show 5 elements but have a length of 3.

How can I get the list in right order without mirror or other unwanted elements ? Thanks.

[mdhtr]

@jbeliezVega did you try getDraggableElementsForContainer yet? I tried it out in your Codepen and managed to get back an Array with 3 elements in the right order. I used it like this: screenPlaylistSortable.getDraggableElementsForContainer(e.newContainer)

[jbeliezVega]

@mdhtr Yes getDraggableElementsForContainer works, thanks for the help.