Draggable, droppable, and sortable list

http://www.knockmeout.net/2011/05/dragging-dropping-and-sorting-with.html

by eohlsson

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
<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 = {
    highPriorityTasks: ko.observableArray([
        new Task("Get dog food"),
        new Task("Mow lawn"),
        new Task("Fix car")
        ]),
    normalPriorityTasks: ko.observableArray([
        new Task("Fix fence"),
        new Task("Walk dog"),
        new Task("Read book")
        ]),
    selectedTask: ko.observable(),
    selectTask: function(task) {
        this.selectedTask(task);
    },
    addTask: function() {
        var task = new Task("new");
        this.selectedTask(task);
        this.normalPriorityTasks.push(task);
    },
    trash: []
};
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...