knockout multiple drag and drop

ko version of answer to: http://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items the code is not production ready, just demonstrates drag and drop using jquery and knockout

by ozzymcduff

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/mint-choc/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div class="demo" id="demo">
    <p>Available Boxes (click to select multiple boxes)</p>
    <div id="draggable">
        <div data-bind="foreach: targets, selectable:{el:'li'}, draggable:{el:'li'}">
            <ul data-bind="foreach: items">
                <li data-bind="text:name, css: {'ui-state-highlight':selected()}"></li>
            </ul>
        </div>
    </div>
    <p>My Boxes</p>
    <ul id="droppable" data-bind="foreach: boxes, droppable:true">
        <li data-bind="text:name, css: {'ui-state-highlight':selected()}"></li>
    </ul>
</div>

CSS

.demo {
    width: 620px
}
ul {
    width: 400px;
    height: 150px;
    padding: 2em;
    margin: 10px;
    color:#ddd;
    list-style: none;
}
ul li {
    cursor: pointer;
}
#draggable {
    background: #444;
}
#droppable {
    background: #222;
}

JavaScript

$(document).ready(function () {
    var data = {
        targets: ko.observableArray([{
            name: "1",
            items: ko.observableArray([{
                name: 'Item 0',
                selected: ko.observable(false)
            }, {
                name: 'Item 1',
                selected: ko.observable(false)
            }, {
                name: 'Item 2',
                selected: ko.observable(false)
            }, {
                name: 'Item 3',
                selected: ko.observable(false)
            }])
        }]),
        boxes: ko.observableArray([])
    };
    ko.bindingHandlers.draggable = {
        init: function (element, valueAccessor, allBindingsAccessor, data, context) {
            var opts = ko.unwrap(valueAccessor());

            var selectedClass = 'ui-state-highlight';
            $(element).find(opts.el)
                .draggable({
                revertDuration: 10,
                // grouped items animate separately, so leave this number low
                containment: '.demo',
                start: function (e, ui) {
                    ui.helper.addClass(selectedClass);
                },
                stop: function (e, ui) {
                    // reset group positions
                    $('.' + selectedClass).css({
                        top: 0,
                        left: 0
                    });
                },
                drag: function (e, ui) {
                    // set selected group position to main dragged object
                    // this works because the position is relative to the starting position
                    $('.' + selectedClass).css({
                        top: ui.position.top,
                        left: ui.position.left
                    });
                }
            });
            // todo: domnode disposal
        }
    };
    ko.bindingHandlers.selectable = {
        init: function (element, valueAccessor, allBindingsAccessor, data, context) {
           ...