title: Draggable droppable knockoutjs sortable accordion and back... (puh)
body: <p>I have a sortable jQuery accordion with a customized for each-loop data-binding.
  Now I want to drop an item from my accordion and onto a "parking place".</p>
  
  <p>I used the jQuery UI´s "Shopping Cart" as a starting point.</p>
  
  <p>This is my code:</p>
  
  <p>First the HTML accordion-loop:</p>
  
  <pre><code>&lt;div id="accordion" data-bind="jqAccordion: { },template: { name: tasktemplate', foreach: Tasks, afterAdd: function(elem){$(elem).trigger('valueChanged');} }" class="group accordion ui-widget ui-helper-clearfix" &gt;&lt;/div&gt;   
  
  &lt;!-------------------- template: begins ---------------------&gt;
  
  &lt;script type="text/html" task-template" &gt;
      &lt;div data-bind="attr: {'id': 'Task' + TaskId}, click: $root.SelectedTask" class="group ui-widget-content ui-corner-tr" &gt;
          &lt;div class="accordion-header  ui-widget-header"&gt;
              &lt;table class="myAccordionHeaderTable" &gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td class="left-upper" &gt;&lt;label for="TaskSequenceNo"&gt;Seq:&lt;/label&gt; &lt;span data-bind="text: TaskSequenceNo"&gt;&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td class="center" rowspan="2" &gt;
                              &lt;h3&gt;&lt;input name="TaskName" data-bind="value: TaskName" /&gt;&lt;/h3&gt;
                          &lt;/td&gt;
                          &lt;td class="right-upper" colspan="2"&gt;Due: &lt;span data-bind="text: DueDate"&gt;&lt;/span&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;tr&gt;
                          &lt;td class="left-bottom"&gt;Id: &lt;span data-bind="text: TaskId" &gt;&lt;/span&gt;&lt;/td&gt;
                          &lt;td class="right-bottom" title="Number of employees attached to task"&gt;T: &lt;span data-bind="text: TaskEmployees"&gt;&lt;/span&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="accordion-content"&gt;
              &lt;label for="Description" &gt;Description:&lt;/label&gt;&lt;textarea name="Description" data-bind="value: Description" class="description"&gt;&lt;/textarea&gt;
          &lt;/div&gt;                      
      &lt;/div&gt;
  &lt;/script&gt;
  &lt;!-------------------- template: ends -----------------------&gt;
  </code></pre>
  
  <p>and the "Parking Spot":</p>
  
  <pre><code>&lt;div id="parking" class="ui-widget-content ui-state-default"&gt;
      &lt;h2 class="ui-widget-header"&gt;Parking&lt;/h2&gt;
      &lt;div class="ui-widget-content"&gt;
          &lt;div&gt;
              &lt;span class="placeholder"&gt;Park tasks here&lt;/span&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The data-binding of the accordion is like this (interesting part is the "$(element).draggable(...)" at the bottom):</p>
  
  <pre><code>ko.bindingHandlers.jqAccordion = {
      init: function (element, valueAccessor) {
          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) {
                  //1st: Handle the visible impression during sorting...
                  // IE doesn't register the blur when sorting so trigger focusout handlers to remove .ui-state-focus
                  ui.item.children("h3").triggerHandler("focusout");
                  //possibly change animation here; { } is default value
                  $(element).accordion("option", "animate", {});
                  //open previously active panel - set active to 'false' to maintain closed.
                  active = false;
                  $(element).accordion("option", "active", active);
                  //change bool to false
                  sorting = false;
                  //alert("element=" + element);
                  //2nd: Create sequence listing of items for later saving
                  var items = [];
                  var itemSeqNos = [];
  
                  ui.item.siblings().andSelf().each(function () {
                      //compare data('index') and the real index
                      if ($(this).data('index') != $(this).index()) {
                          items.push(this.id);
                          itemSeqNos.push(this.id.replace("Task", "")); // Remove prefix ("Task") to build SequenceNo-array... NB!! Could this record been built only with items involved and not whole list to reduce traffic ????
                      }
                  });
  
                  ui.item.parent().trigger('stop');
  
                  //Collect data from the accordion to set selected and set new sequence no.
                  var context = ko.contextFor(this);
                  //add a child to the appropriate parent, calling a method off of the main view model (context.$root)
                  context.$root.isAccordionSorted(itemSeqNos); // THIS WORKS!!!
              }
          })
          .on({
              click: function () {
                  $("#debug").text("-on Click: ");
                  setTimeout(function () {
                      $("#debug").text("------");
                  }, 1000);
              },
              stop: function () {
                  $("#debug").text("-on Stop");
                  $(this).siblings().andSelf().each(function (i) {
                      $(this).data('index', i);
                  });
              }
          })
          .trigger('stop');
      $(element).draggable({
              handle: "div.accordion-header",
              axis: "x, y",
              cancel: "invalid",
              cursor: "move",
              appendTo: "body",
              helper: "clone"
          });
  }
  </code></pre>
  
  <p>};</p>
  
  <p>Then at last the droppable code for the "Parking Spot":</p>
  
  <pre><code>&lt;script&gt;
  $(function() {
      $("#parking div").droppable({
          activeClass: "ui-state-default",
          hoverclass: "ui-state-hover",
          accept: ":not(.ui-sortable-helper)",
          drop: function(event, ui){
              $(this).find(".placeholder").remove();
              $("&lt;div&gt;&lt;/div&gt;").text( ui-draggable.text() ).appendTo(this);
          }
      }).sortable({
          items:"span:not(.placeholder)",
          sort: function(){
              // gets addde unintentionally by droppable interacting with sortable
              // using connectWithSortable fixed this, but doesn\t allow customizee active/hoverClass options
              $(this).removeClass("ui-state-default");
          }
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Basically what I want is:
     1. Being able to drag drop an item from the accordion "
     2. Drop the item onto the "Parking Spot" 
     3. Hide DueDate and TaskEmployees but the TaskName in the accordion-header.</p>
  
  <p>Next step:
     4. Drag and drop the item back from the Parking.</p>