Multiselect drag´n´drop to accordion

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://knockoutjs.com/downloads/knockout-3.2.0.js"></script>
<p>Multi-select Drag</p>
<p> <kbd>Click</kbd> to select individual items
    <br /> <kbd>Ctrl + Click</kbd> to select multiple items</p>
<div>
    <ul class="resource-accordion" data-bind="foreach: resources">
        <li class="people" data-bind="text: name"></li>
    </ul>
</div>
<hr/>
      
<hr>
<hr>

<div id="accordion2" data-bind="jqAccordion: { },template: { name: 'mytemplate', foreach: tasks,  afterAdd: function(elem){$(elem).trigger('valueChanged');} }"></div>         
   
<hr><hr>
                  
<div id="accordion" data-bind="foreach: tasks">
    <div data-bind="attr: {'id': 'Task' + TaskId}" class="group">
        <div class="accordion-header  ui-widget-header">
            <h3><b><span data-bind="text: TaskId"></span>: <span data-bind="text: TaskName"></span></b></h3>
        </div>    
        <div>
            <!-- <textarea name="Purpose" data-bind="value: Purpose"></textarea>
            <hr style="margin: 2px;" />
            <textarea name="Description" data-bind="value: Description"></textarea>
            <hr style="margin: 2px;" /> -->
            <div>
                <ul class="resource-accordion" ></ul>
            </div>
            <hr style="margin: 2px;" />
        </div>
    </div>
</div>
    
<br><br>
<div>
    Sekvens:  <span id="sekvens"> This is the sequence</span>
</div>    
<hr>    
<script type="text/html" id="mytemplate">
    <div data-bind="attr: {'id': 'scene' + TaskId}" class="group ui-widget-content ui-corner-tr" >
        <div class="accordion-header  ui-widget-header">
            <h3><b><span data-bind="text: TaskId"></span>: <span data-bind="text: TaskName"></span></b></h3>
        </div>
        <div class="accordion-content">
            <div>   
                <ul class="resource-accordion" ></ul>
            </div>
        </div>              ...

CSS

.resource-accordion {
    border:1px solid Black;
    width:200px;
    height:200px;
    display:inline-block;
    vertical-align:top
}
 li {
    background-color:skyblue;
    border-bottom:1px dotted Gray
}
 li.selected {
    background-color:GoldenRod
}

JavaScript

ko.bindingHandlers.jqAccordion = {
    init: function (element, valueAccessor) {
        debugger
        var options = valueAccessor();
        $(element).accordion(options);
        $(element).bind("valueChanged", function () {
            ko.bindingHandlers.jqAccordion.update(element, valueAccessor);
        });
    },
    update: function (element, valueAccessor) {
        var options = valueAccessor();

        $(element).accordion("destroy").accordion({
            header: ".accordion-header",
            collapsible: true,
            navigation: true,
            heightStyle: "content",
            active: false
        })
            .sortable({
                axis: "x, y",
                handle: ".accordion-header",
                placeholder: "ui-state-highlight",
                start: function (event, ui) {
                    //change bool to true
                    sorting = true;
                    //find what tab is open, false if none
                    active = $(this).accordion("option", "active");
                    //possibly change animation here (to make the animation instant if you like)
                    $(element).accordion("option", "animate", {
                        easing: 'swing',
                        duration: 0
                    });
                    //close tab
                    $(element).accordion({
                        active: false
                    });
                },
                over: function (event, ui) {
                    $(element).accordion({
                        active: false
                    });
                },
                stop: function (event, ui) {
                    //possibly change animation here; { } is default value
                    $(element).accordion("option", "animate", {});
                    
                    //open previously active panel - set active to 'false' to maintain closed.
                    active = false;
                   ...