title: Knockout-Sortable horizontal list pushes items vertically when dragging items
body: <p>I am creating an application with knockout.js, using knockout-sortable for drag-and-drop sortable lists. There is a vertical list, and inside each of those items is a horizontal list. The vertical lists behave just fine, but whenever I try to drag an item in the horizontal lists, it pushes the rest of the items in that list up or down relative to the item being dragged. The horizontal lists are defined as follows:</p>
  
  <pre><code>&lt;div style="float: left" data-bind="sortable: { template: 'levelTmpl', data: $data.levels, beforeMove: $root.verifyMove, afterAdd: showLevel, beforeRemove: hideLevel, options: { containment: 'parent' } }"&gt;&lt;/div&gt;
  &lt;script id="levelTmpl" type="text/html"&gt;
      &lt;div class="container item" style="display: inline-block"&gt;
      &lt;div style="float: right"&gt;&lt;span class="ui-button" data-bind="click: $parent.removeLevel"&gt;[x]&lt;/span&gt;&lt;/div&gt;
      &lt;input data-bind="value: name"/&gt;&lt;br/&gt;
      &lt;div style="clear: both"&gt;&lt;/div&gt;
      &lt;textarea cols="35" rows="4" data-bind="value: description"&gt; &lt;/textarea&gt;&lt;br/&gt;
      &lt;textarea cols="35" rows="4" data-bind="value: canned"&gt; &lt;/textarea&gt;
      &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>You can view the full application here:<br>
  <strong>link no longer exists</strong><br><br>
  I have tried every suggestion I have found, including those at <a href="http://bugs.jqueryui.com/ticket/6702" rel="nofollow">http://bugs.jqueryui.com/ticket/6702</a>, and so far, nothing has worked. I would really like to get horizontal sortable lists working, so if anyone has any suggestions I would really appreciate it.</p>