JSFiddle - React, Tailwind, and code Playground

by eohlsson

HTML

<div id="main">
   <div id="left" class='child inline-block-child'>
   <h2>Items</h2>
      <div class="container high" data-bind="template: { name: 'taskTmpl', foreach: Items, templateOptions: { parentList: Items} }, sortableList: Items"></div>
   </div>
    
   <div id="right" class='child inline-block-child'>
      <h2>Increase</h2>
      <div class="container " data-bind="template: { name: 'taskTmpl', foreach: IncreaseItems, templateOptions: { parentList: IncreaseItems} }, sortableList: IncreaseItems"></div>

      <h2>Leave As Is</h2>
      <div class="container" data-bind="template: { name: 'taskTmpl', foreach: LeaveItems, templateOptions: { parentList: LeaveItems} }, sortableList: LeaveItems"></div>

      <h2>Reduce</h2>
      <div class="container" data-bind="template: { name: 'taskTmpl', foreach: ReduceItems, templateOptions: { parentList: ReduceItems} }, sortableList: ReduceItems"></div>
    </div>
    
    <script id="taskTmpl" type="text/html">
        <div class="item" data-bind="sortableItem: { item: $data, parentList: $item.parentList }" >
            <a href="#" data-bind="text: name, click: function() { viewModel.selectTask($data); }, visible: $data !== viewModel.selectedTask()"></a>
            <input data-bind="value: name, visibleAndSelect: $data === viewModel.selectedTask(), event: { blur: function() { viewModel.selectTask(''); } }" />
        </div>
    </script>
    
</div>    


<script id="resultTmpl" type="text/html">
    <li data-bind="text: name"></li>
</script>

CSS

body { font-family: arial; }
h2 { font-weight: bold; }
div {  padding: 5px; margin: 5px; border: black 1px solid; }
p, a { font-size: .8em; }
ul { padding-bottom: 10px; }
.container {  width: 325px; min-height: 50px; background-color: #AAA;}
.high { background-color: green; }
.trash { background-color: #000;  }
.item { background-color: #DDD; cursor: move; }
.item input { width: 100px; }
#main { float: left; display: inline-flex;}
#results { margin-left: 175px; width: 150px; }
.inline-block-child {
  
}

JavaScript

function Task(name) {
    this.name = ko.observable(name);
}
var viewModel = {
    Items: ko.observableArray([
      new Task("Content knowledge as needed for lesson planning" ),
      new Task("Planning standards-aligned lessons with clear purpose" ),
      new Task("Planning instruction appropriate for students with varied skill and ability levels" ),
      new Task("Creating supportive and challenging classroom environment" ),
      new Task("Developing efficient classroom routines for non-instructional tasks e.g., distributing materials, managing transitions" ),
      new Task("Establishing and enforcing standards of conduct in small and large group situation" ),
      new Task("Creating intellectually engaging learning tasks" ),
      new Task("Creating and using summative assessments" ),
      new Task("Using formative assessment data to make day-to-day decisions about instruction" ),
      new Task("Collaborating with colleagues in making team and department decisions" ),
      new Task("Identifying and addressing my professional development needs" )
        ]),
    IncreaseItems: ko.observableArray(),
    LeaveItems: ko.observableArray(),
    ReduceItems: ko.observableArray(),
    selectedTask: ko.observable(),
    selectTask: function(task) {
        this.selectedTask(task);
    },

};

//connect items with observableArrays
ko.bindingHandlers.sortableList = {
    init: function(element, valueAccessor, allBindingsAccessor, context) {
        $(element).data("sortList", valueAccessor()); //attach meta-data
        $(element).sortable({
            update: function(event, ui) {
                var item = ui.item.data("sortItem");
                if (item) {
                    //identify parents
                    var originalParent = ui.item.data("parentList");
                    var newParent = ui.item.parent().data("sortList");
                    //figure out its new position
                    var position =...