Javascript 删除可排序水平列表在拖动项目时垂直推送项目

我正在使用knockout.js创建一个应用程序，将knockout sortable用于拖放可排序列表。有一个垂直列表，每个项目中都有一个水平列表。垂直列表的行为很好，但每当我尝试拖动水平列表中的一个项目时，它就会相对于要拖动的项目向上或向下推该列表中的其余项目。水平列表定义如下：

<div style="float: left" data-bind="sortable: { template: 'levelTmpl', data: $data.levels, beforeMove: $root.verifyMove, afterAdd: showLevel, beforeRemove: hideLevel, options: { containment: 'parent' } }"></div>
<script id="levelTmpl" type="text/html">
    <div class="container item" style="display: inline-block">
    <div style="float: right"><span class="ui-button" data-bind="click: $parent.removeLevel">[x]</span></div>
    <input data-bind="value: name"/><br/>
    <div style="clear: both"></div>
    <textarea cols="35" rows="4" data-bind="value: description"> </textarea><br/>
    <textarea cols="35" rows="4" data-bind="value: canned"> </textarea>
    </div>
</script>

[x]

您可以在此处查看完整的应用程序：
链接不再存在

我已经尝试了我发现的每一个建议，包括那些在，到目前为止，没有任何效果。我真的很想让水平排序列表发挥作用，所以如果有人有任何建议，我将不胜感激。

仅供参考，这只是jquery ui排序表的包装

---

为了避免混淆列表，请对可排序元素使用connectClass

我无法理解这一点，所以我选择了Peter Flannery的解决方案，它根本不使用击倒排序。我仍然很想弄清楚为什么这不起作用，所以任何评论都会很好。你有一个重现问题的JSFIDLE吗？不再有了。我会看看我是否能找到一个旧版本的代码来制作一个。我只是有一个类似的问题。创建JSFIDLE太复杂了，但解决方案是简单地将这些项包装在一个span元素中。