Sorting drops items in wrong spot or duplicates items

[justingrant]

Even with simple usage (no spaces, no dynamic templates, etc.), the resulting list is garbled after sorting. Items end up in different spots from where I dropped them, items are sometimes duplicated, or items are sometimes replaced by other items. Which specific problem behavior happens seems to depend on which items were dropped and where they were dropped.

Here's a pared-down fiddle: http://jsfiddle.net/7mvney7k/3/

Seeing this using knockout-sortable 0.11.0, KO 3.4, jQuery 2.1.4, and jQuery UI 1.11.4. Reproes on Chrome and FF on Windows 7.

This sounds similar to behavior described in #151 but in my case I'm not using dynamic templates and I see the problem in the simplest possible usage.

I notice in Firebug that the sortable() implementation is creating extra DIV elements in between each real DIV. Is it possible that KO is getting confused by these extra DIVs when it's trying to map the newly-dropped item to the right data element?

[justingrant]

After more investigation, it does look like the problem is the extra ui-sortable-handle DOM elements that are created inside the sortable. Here's a repro fiddle (http://jsfiddle.net/dpecouop/) to illustrate that afterMove() is being called with an incorrect targetIndex because the index calculation is not excluding the extra elements created by the sortable.

[JD-Robbs]

I'm seeing the same issue as you - probably also related to #151. Quite frequently, dragged/sorted objects are duplicated and, from that point onwards, knockout.sortable starts breaking down. It's a bit of a strange one since it appears sporadically and I couldn't work-out the underlying pattern as to why it happens or how to fix it.

I am using latest knockout.sortable, jQuery 2.2.1 and jQueryUI 1.11.4.

@justingrant: have you managed to find a solution for this, by any chance?

P.S.: one more peculiarity I noticed is when dropping the item at the very top of the list. For me, this often leads to an Uncaught RangeError: Maximum call stack size exceeded in jQuery's camelCase() function.

Plus, when an item is duplicated, it happens at the expense of losing one of the other ones - not only in the view, but it actually gets deleted in the underlying data-model.

[rniemeyer]

@justingrant - I am sorry to respond so long after your issue, but it appears that your issue is related to your last div not being closed in those fiddles (should be </div> rather than <div>. Not to say your real project did not have an issue itself, but that seems to cause the duplication in your fiddle.