Sorting is creating duplicate items

[wellso]

I'm trying to sortable working with dynamic templates, but after I re-order the items, duplicates keep being introduced. Could you shed any light on where I'm going wrong or if its a bug? Thanks.

http://jsfiddle.net/cqsv1fn3/

[wellso]

83 seems to fix the problem i was having

[rniemeyer]

I can't quite tell from your fiddle, as it doesn't seem runnable, but it is likely the same as this: https://github.com/rniemeyer/knockout-sortable/issues/150 . Make sure that you strip whitespace / text nodes from the beginning and the end inside your script tags. There is code to automatically strip this whitespace from templates, but it doesn't kick in on dynamic templates.

[abradley2]

I had a similar issue, resolved by adding this as the afterMove hook function

this.afterMove = function( model, event, jqui ) {
  $(jqui.item[0]).remove();
};

http://jsfiddle.net/dnk43atp/

Learned the fix from this: https://github.com/rniemeyer/knockout-sortable/pull/118

[pawel-zolty]

2018 solution: The problem is that we have to use ul and li DOM objects to use knockout-sortable. It is not possible to use e.g. div. With my code:

<div data-bind="sortable: { data: availablePictures, beforeMove : beforeMove, afterMove: afterMove}, connectClass:false" class="..." id="picturesList">            
                <div> 
   content

I have objects copied and removed randomly.

When I change to:

<ul style="overflow:hidden; list-style-type:none" data-bind="sortable: { data: availablePictures, beforeMove : beforeMove, afterMove: afterMove}, connectClass:false" class="static-height-container" id="picturesList">
            <li style="float:left; display:block">
                <div>
content

it works properly