Draggable, droppable, and sortable list

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

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<span data-bind="text: personRoles().length"></span>

<!-- List for role == 1 -->
<ul data-bind="template: { name: 'personRoleTemplate', foreach: personRoles }"></ul>

<!-- List for role == 2 -->
<ul data-bind="template: { name: 'personRoleTemplate', foreach: personRoles }"></ul>

<!-- List for role == 3 -->
<ul data-bind="template: { name: 'personRoleTemplate', foreach: personRoles }"></ul>

<script type="text/x-jquery-tmpl" id="personRoleTemplate">
    <li><span data-bind="text: name"></span></div></li>
</script>

CSS

ul
{
    padding: 10px;
    border: 1px black solid;
}

JavaScript

var PersonRole = function(name, id)
        {
            this.name = name;
            this.id = id;
        };
 
   var viewModel =   
    {
        personRoles : ko.observableArray([]),
        add : function(name, role)
        {
            this.personRoles.push(new PersonRole(name, role));
        }

    };
    


    viewModel.add('Bob', 1);
    viewModel.add('John', 2);
    viewModel.add('Steve', 3);

    // Activates knockout.js
    ko.applyBindings(viewModel);