title: How to extend grab-able area in Sortable jQuery UI Accordion with table header
body: <p>I have this sortable accordion with a table in the header. The table is straight-forward: 2 rows and 3 columns, with the center column spanned over both rows, so in total 5 elements.</p>
  
  <p>In the central element I use an input-element:</p>
  
  <pre><code>&lt;div id="accordion" 
       data-bind="jqAccordion: { },template: { name: 'task-template', foreach: ¨Tasks, afterAdd: function(elem){$(elem).trigger('valueChanged');} }"&gt;
  &lt;/div&gt;   
  
  &lt;script type="text/html" id="task-template"&gt;
      &lt;div data-bind="attr: {'id': 'Task' + TaskId}, click: $root.SelectedTask" class="group"&gt;
          &lt;div class="accordion-header"&gt;
              &lt;table class="myAccordionHeader" &gt;
                  &lt;tbody&gt;
                      &lt;tr&gt;
                          &lt;td class="left-upper" &gt;
                              &lt;label for="SequenceNo"&gt;Seq:&lt;/label&gt;
                              &lt;span data-bind="text: SequenceNo"&gt;&lt;/span&gt;
                          &lt;/td&gt;
                          &lt;td class="center" rowspan="2" &gt;
                              &lt;h3&gt;&lt;b&gt;&lt;input name="TaskName" data-bind="value: TaskName" /&gt;&lt;/b&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"&gt;
                              Status: &lt;span data-bind="text: TaskStatus"&gt;&lt;/span&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/div&gt;
          &lt;div class="myAccordionContent"&gt;
              &lt;!-- Contents here... --&gt;
          &lt;/div&gt;    
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>After introducing the table in the header, the only spots where I can grab my accordion header is in the input-elements margin, and to the side of it before the third column starts. </p>
  
  <p>I reckon this has to do with some basic event on the tables data elements (<code>&lt;td&gt;</code>s).
  The other <code>&lt;td&gt;</code>s are filled with text and <code>&lt;span&gt;</code> elements data-bound with knockout variables.</p>
  
  <p>Any clue on how to expand the "grabable" area for the accordion?</p>