Knockout - Fixes #623 #585 #557

README.md

@@ -655,11 +655,11 @@ Link to the active instance.
 
 ```html
 <!-- CDNJS :: Sortable (https://cdnjs.com/) -->
-<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.0-rc1/Sortable.min.js"></script>
+<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.4.2-rc1/Sortable.min.js"></script>
 
 
 <!-- jsDelivr :: Sortable (http://www.jsdelivr.com/) -->
-<script src="//cdn.jsdelivr.net/sortable/1.4.0-rc1/Sortable.min.js"></script>
+<script src="//cdn.jsdelivr.net/sortable/1.4.2-rc1/Sortable.min.js"></script>
 
 
 <!-- jsDelivr :: Sortable :: Latest (http://www.jsdelivr.com/) -->

Sortable.js

@@ -1258,6 +1258,6 @@
 
 
 	// Export
-	Sortable.version = '1.4.0';
+	Sortable.version = '1.4.2';
 	return Sortable;
 });

component.json

@@ -1,7 +1,7 @@
 {
   "name": "Sortable",
   "main": "Sortable.js",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "homepage": "http://rubaxa.github.io/Sortable/",
   "repo": "RubaXa/Sortable",
   "authors": [

knockout-sortable.js

@@ -78,7 +78,7 @@
                     moveItem(itemVM, removeOperation.collection, addOperation.collection, addOperation.event.clone, addOperation.event);
                 }
             },
-            // Moves an item from the "to" collection to the "from" collection, these
+            // Moves an item from the "from" collection to the "to" collection, these
             // can be references to the same collection which means it's a sort.
             // clone indicates if we should move or copy the item into the new collection
             moveItem = function (itemVM, from, to, clone, e) {
@@ -89,11 +89,12 @@
                     originalIndex = fromArray.indexOf(itemVM),
                     newIndex = e.newIndex;
 
-                if (e.item.previousElementSibling)
+                // We have to find out the actual desired index of the to array, 
-                {
+                // as this might be a computed array. We could otherwise potentially
-                    newIndex = fromArray.indexOf(ko.dataFor(e.item.previousElementSibling));
+                // drop an item above the 3rd visible item, but the 2nd visible item
-                    if (originalIndex > newIndex)
+                // has an actual index of 5.
-                        newIndex = newIndex + 1;
+                if (e.item.previousElementSibling) {
+                    newIndex = to().indexOf(ko.dataFor(e.item.previousElementSibling)) + 1;
                 }
 
                 // Remove sortables "unbound" element

knockout/example.html

@@ -51,8 +51,8 @@
 					</ul>
 				</div>
 				<div class="col-1_2 mirror">
-					<h4>Sortable computed mirrored</h4>
+					<h4>Sortable underlaying computed</h4>
-					<ul data-bind="foreach: sortableComputedItems">
+					<ul data-bind="foreach: underlayingSortableComputedItems">
 						<li data-bind="text: name"></li>
 					</ul>
 				</div>
@@ -101,7 +101,7 @@
 	<script src="../knockout-sortable.js"></script>
 	<script>
 
-		var sortableComputedItems = [{ name: 'Sortable computed 1' }, { name: 'Sortable computed 2' }, { name: 'Sortable computed 3' }];
+		var sortableComputedItems = [{ name: 'Sortable computed 1' }, { name: 'Filtered computed 2' }, { name: 'Sortable computed 3' }, { name: 'Filtered computed 4' }, { name: 'Sortable computed 5' }, { name: 'Filtered computed 6' }];
 		var sortableObservableItems = [{ name: 'Sortable observable 1' }, { name: 'Sortable observable 2' }, { name: 'Sortable observable 3' }];
 
 		var draggableComputedItems = [{ name: 'Draggable computed 1' }, { name: 'Draggable computed 2' }, { name: 'Draggable computed 3' }];
@@ -113,7 +113,12 @@
 			underlayingDraggableComputedItems: ko.observableArray(draggableComputedItems),
 			draggableObservableItems: ko.observableArray(draggableObservableItems)
 		}
-		vm.sortableComputedItems = ko.computed(function () { return vm.underlayingSortableComputedItems(); });
+		vm.sortableComputedItems = ko.computed(function () {
+			return vm.underlayingSortableComputedItems()
+				.filter(function (item) {
+					return item.name.indexOf('Filtered') < 0;
+				});
+		});
 		vm.draggableComputedItems = ko.computed(function () { return vm.underlayingDraggableComputedItems(); });
 
 		ko.applyBindings(vm);