playground
/
Sortable
mirror of https://github.com/RubaXa/Sortable.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Merge branch 'srosengren-dev' into dev

pull/699/merge
RubaXa 9 years ago
parent
e53002892f 4ee9735a60
commit
3a83c35d02
4 changed files with 136 additions and 8 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      README.md
  2. 2
      Sortable.min.js
  3. 13
      knockout-sortable.js
  4. 127
      knockout/example.html

2
README.md
Unescape View File

@ -502,7 +502,7 @@ Other attributes are:
### Support Polymer ### Support Polymer
```html ```html
<link rel="import" href="bower_components/Sortable/Sortable.html"> <link rel="import" href="bower_components/Sortable/Sortable-js.html">
<sortable-js handle=".handle"> <sortable-js handle=".handle">
<template is="dom-repeat" items={{names}}> <template is="dom-repeat" items={{names}}>

2
Sortable.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
knockout-sortable.js
Unescape View File

@ -78,7 +78,7 @@
moveItem(itemVM, removeOperation.collection, addOperation.collection, addOperation.event.clone, addOperation.event); 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. // 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 // clone indicates if we should move or copy the item into the new collection
moveItem = function (itemVM, from, to, clone, e) { moveItem = function (itemVM, from, to, clone, e) {
@ -89,11 +89,12 @@
originalIndex = fromArray.indexOf(itemVM), originalIndex = fromArray.indexOf(itemVM),
newIndex = e.newIndex; 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 // Remove sortables "unbound" element

127
knockout/example.html
Unescape View File

@ -0,0 +1,127 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
.grid {
font-size: 0;
}
.col-1_2 {
box-sizing:border-box;
display: inline-block;
padding: 0.5rem;
font-size: 1rem;
}
.col-1_2 {
width: 50%;
}
.mirror {
color: #ccc;
}
</style>
</head>
<body>
<div class="grid">
<div class="col-1_2">
<div class="grid">
<div class="col-1_2">
<h4>Sortable observable</h4>
<ul data-bind="sortable: {foreach: sortableObservableItems}">
<li data-bind="text: name"></li>
</ul>
</div>
<div class="col-1_2 mirror">
<h4>Sortable observable mirrored</h4>
<ul data-bind="foreach: sortableObservableItems">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
</div>
<div class="col-1_2">
<div class="grid">
<div class="col-1_2">
<h4>Sortable computed</h4>
<ul data-bind="sortable: {foreach: sortableComputedItems, collection: underlayingSortableComputedItems}">
<li data-bind="text: name"></li>
</ul>
</div>
<div class="col-1_2 mirror">
<h4>Sortable underlaying computed</h4>
<ul data-bind="foreach: underlayingSortableComputedItems">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="grid">
<div class="col-1_2">
<div class="grid">
<div class="col-1_2">
<h4>Draggable observable</h4>
<ul data-bind="draggable: {foreach: draggableObservableItems}">
<li data-bind="text: name"></li>
</ul>
</div>
<div class="col-1_2 mirror">
<h4>Draggable observable mirrored</h4>
<ul data-bind="foreach: draggableObservableItems">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
</div>
<div class="col-1_2">
<div class="grid">
<div class="col-1_2">
<h4>Draggable computed</h4>
<ul data-bind="draggable: {foreach: draggableComputedItems, collection: underlayingDraggableComputedItems}">
<li data-bind="text: name"></li>
</ul>
</div>
<div class="col-1_2 mirror">
<h4>Draggable computed mirrored</h4>
<ul data-bind="foreach: draggableComputedItems">
<li data-bind="text: name"></li>
</ul>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="../Sortable.js"></script>
<script src="../knockout-sortable.js"></script>
<script>
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' }];
var draggableObservableItems = [{ name: 'Draggable observable 1' }, { name: 'Draggable observable 2' }, { name: 'Draggable observable 3' }];
var vm = {
underlayingSortableComputedItems: ko.observableArray(sortableComputedItems),
sortableObservableItems: ko.observableArray(sortableObservableItems),
underlayingDraggableComputedItems: ko.observableArray(draggableComputedItems),
draggableObservableItems: ko.observableArray(draggableObservableItems)
}
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);
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save