JSFiddle - React, Tailwind, and code Playground

by Asle Gundersby

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="https://rawgit.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>
    </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>
    </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; }

JavaScript

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

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

        function ViewModel(scenes, texts) {
            this.scenes = ko.observableArray(scenes);
            this.selectedScene = ko.observable();
            this.texts = ko.observableArray(texts);
            this.currentSceneTexts = ko.observableArray();

            // seed the available texts
            this.availableTexts = ko.observableArray(ko.utils.arrayFilter(this.texts(), function(text) {
                return text.sceneID() === null;
            }));

            // setup current texts when selected scene changes
            this.selectedScene.subscribe(function(scene) {
                this.currentSceneTexts(ko.utils.arrayFilter(this.texts(), function(text) {
                    return text.sceneID() === scene.sceneID;
                }));
            }, this);

            // handle sequence #s
            function resetSequence(items) {
             ...