8

I'm using jQuery Sortable and Knockout to maintain an array.

http://jsfiddle.net/daniel_white/KrGY8/3/

Notice when you drag the items, they duplicate or disappear.

Anyone know how I could fix this?

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445

2 Answers2

30

KO's mapping of items gets a little messed up based on empty text nodes when you are moving things around using jQuery UI sortable.

You can either eliminate the text nodes in your "template" like: http://jsfiddle.net/rniemeyer/KrGY8/5/

Or remove the existing item and put it back to the right spot in two steps (updating the observableArray twice): http://jsfiddle.net/rniemeyer/KrGY8/4/

I also wrote a binding plugin to work with jQuery sortable in Knockout that provides some additional features here: https://github.com/rniemeyer/knockout-sortable

RP Niemeyer
  • 114,592
  • 18
  • 291
  • 211
  • 2
    I used your plugin and my initial impression is that it works great! Thanks for providing it. – Brian Mar 22 '12 at 02:39
  • Thanks RP, this saved quite some time for me.. I went with 2nd suggestion as well and it worked like a charm. – Kon Jan 28 '13 at 21:39
  • Awesome plugin; I struggled for hours before I found this, and it works like a charm. Wish I could upvote more than once. – Joe Mar 04 '14 at 19:59
  • I'm using an extended version of the sortable plugin to allow multiple selected items to be moved together, so I cannot use your plugin currently, and thus I used the first tip about empty text nodes and fixed my template accordingly. Now everything seems to be working fine. Thank you. – Zoltán Tamási Jul 03 '15 at 11:19
1

An easy way to work around this problem is to first clear your binded observableArray, like this: 

list([]);

Then updated it with the correct array: 

list(actualArray);

Check the updated fiddle

Roumelis George
  • 6,602
  • 2
  • 16
  • 31