1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
	<style type="text/css">
		#sortable1, #sortable2  {
			list-style-type: none; 
			margin: 0; 
			padding: 0; 
			float: left; 
			margin-right: 10px; 
			background: #eee; 
			padding: 5px; 
			width: 143px;
		}
		#sortable1 li, #sortable2 li {
			margin: 5px; 
			padding: 5px; 
			font-size: 1.2em; 
			width: 120px; 
		}
	</style>

	<script type="text/javascript">
		$(document).ready(function () {

			$("#sortable1, #sortable2").sortable({
				connectWith: ".connectedSortable",
				dropOnEmpty: true,
				receive: function (event, ui) {
				}
			}).disableSelection();

			var product = function (data) {
				this.Name = data.Name;
				this.Price = data.Price;
			};

			var viewModel = {
				Products: ko.observableArray([
					new product({ Name: "Windows XP", Price: 199.99 }),
					new product({ Name: "Windows Vista", Price: 299.99 }),
					new product({ Name: "Windows 7", Price: 239.99 })
				]),
				Selected: ko.observableArray([]),
				Moving: ko.observable(),
				save: function () {
					$("#jsonResults").html(ko.toJSON(this.Selected));
				}
			};

			ko.bindingHandlers.onReceiveItem = {
				init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
					$(element).bind("sortreceive", function (event, ui) {
						ko.bindingHandlers.onReceiveItem.update(element, valueAccessor, allBindingsAccessor, viewModel);
					});
				},
				update: function (element, valueAccessor, allBindingsAccessor, viewModel) {
					var value = ko.utils.unwrapObservable(valueAccessor());
					var bindings = allBindingsAccessor();
				}
			};
			ko.applyBindings(viewModel);
		});
	</script>
</head>
	<body>
		<div class="container">
			<ul id="sortable1" class="connectedSortable" data-bind="template: 'tmpProducts'"></ul>
			<ul id="sortable2" class="connectedSortable" data-bind="template: 'tmpSelected', onReceiveItem : Moving "></ul>
			<div id="jsonResults"></div>
		</div>
		<script type="text/html" id="tmpProducts">
		{{each(i, product) Products()}}
			<li class="ui-state-default">${product.Name}</li>
		{{/each}}
		<br />
		<a href="#" data-bind="click: save">Show Results</a>
		</script>

		<script type="text/html" id="tmpSelected">
		{{each(i, product) Selected()}}
			<li class="ui-state-highlight">${product.Name}</li>
		{{/each}}
		</script>
	</body>