ko-sortable - drag between lists

https://github.com/rniemeyer/knockout-sortable WORKING IS NEW with computers!!!!!

by Asle Gundersby

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://rawgithub.com/rniemeyer/knockout-sortable/master/build/knockout-sortable.js"></script>
<ul data-bind="sortable: scenes">
  <li>
    <a href="#" data-bind="click: $root.selectedScene">
        <span data-bind="text: sequenceNo"></span>:
        <span data-bind="text: title"></span>
    </a>
  </li>
</ul>

<hr/>

<div data-bind="with: selectedScene">
  <h2><span data-bind="text: $data.title"></span> Texts</h2>

  <ul data-bind="sortable: { data: $root.currentSceneTexts, afterMove: $root.updateSceneID.bind($root, $data.sceneID) }">
    <li>
      <span data-bind="text: $parent.sequenceNo"></span>-<span data-bind="text: $data.sequenceNo"></span>:
      <span data-bind="text: title"></span>
      <a class="undo-textallocation" data-bind="click: function(){$root.undoTextAllocation($data)}"><span>x</span></a>
    </li>
  </ul>

  <hr/>

  <h2>Available Texts</h2>
  <ul data-bind="sortable: { data: $root.availableTexts, afterMove: $root.updateSceneID.bind($root, null) }">
    <li>
      <span data-bind="text: sequenceNo"></span>:
      <span data-bind="text: title"></span>
      <button class="right" data-bind="click: $root.addTextbatchToScene" >Add</button>
    </li>
  </ul>
</div>

CSS

body { font-family: arial; }
ul { min-height: 50px; border: solid 1px #000; padding: 5px; list-style: none; }
li { padding: 5px; margin: 5px; background-color: #eee; border: solid 1px #ddd; }
.undo-textallocation{
  color: red;
  cursor: pointer;
}

JavaScript

var scenes = [
                         { sceneID: 0, projectID: 1, title: "First scene", sequenceNo: ko.observable(1) },
                         { sceneID: 1, projectID: 1, title: "Second scene", sequenceNo: ko.observable(2) },
                         { sceneID: 2, projectID: 1, title: "Third scene", sequenceNo: ko.observable(3) }
                    ];

    var texts = [
                    { textID: 0, sceneID: ko.observable(0), projectID: 1, title: "Text A", sequenceNo: ko.observable(1) },
                    { textID: 1, sceneID: ko.observable(null), projectID: 1, title: "Text B", sequenceNo: ko.observable(2) },
                    { textID: 2, sceneID: ko.observable(null), projectID: 1, title: "Text C", sequenceNo: ko.observable(3) },
                    { textID: 3, sceneID: ko.observable(2), projectID: 1, title: "Text D", sequenceNo: ko.observable(4) },
                    { textID: 4, sceneID: ko.observable(null), projectID: 1, title: "Text E", sequenceNo: ko.observable(5) },
                    { textID: 5, sceneID: ko.observable(2), projectID: 1, title: "Text F", sequenceNo: ko.observable(6) },
                    { textID: 6, sceneID: ko.observable(1), projectID: 1, title: "Text G", sequenceNo: ko.observable(7) },
                    { textID: 7, sceneID: ko.observable(1), projectID: 1, title: "Text H", sequenceNo: ko.observable(8) }
                ];

        function ViewModel(scenes, texts) {
        		var self = this;
            var projectID = 1;
            
          	this.selectedScene = ko.observable();

            self.allScenes = ko.observableArray(scenes);
            this.scenes = ko.computed(function () {
                return ko.utils.arrayFilter(self.allScenes(), function (scene) {
                    return scene.projectID == projectID;
                });
            });

            self.allTexts = ko.observableArray(texts);
            self.texts = ko.computed(function () {
                return...