jquery ui可排序嵌套多级菜单顺序

Question

我正在尝试multi-level nested jQuery UI Sortable重新排序菜单，但一切都一团糟。在单个级别上它没问题，但是当我尝试改变深度时它失败了。

我的代码： http: //jsfiddle.net/c7PGP/5/

html:

<ul class="sortable list-unstyled" id="sortable">
    <li>
        <div class="block block-title">Index</div>
        <ul class="sortable list-unstyled"></ul>
    </li>
    <li>
        <div class="block block-title">About Us</div>
        <ul class="sortable list-unstyled"></ul>
    </li>
    <li>
        <div class="block block-title">Portfoion</div>
        <ul class="sortable list-unstyled"></ul>
    </li>
    <li>
        <div class="block block-title">Services</div>
        <ul class="sortable list-unstyled">
            <li>
                <div class="block block-title">Design</div>
                <ul class="sortable list-unstyled"></ul>
            </li>
            <li>
                <div class="block block-title">Develope</div>
                <ul class="sortable list-unstyled"></ul>
            </li>
            <li>
                <div class="block block-title">SEO</div>
                <ul class="sortable list-unstyled"></ul>
            </li>
            <li>
                <div class="block block-title">Support</div>
                <ul class="sortable list-unstyled"></ul>
            </li>
        </ul><!-- /.menu-sortable -->
    </li>
    <li>
        <div class="block block-title">Contact</div>
        <ul class="sortable list-unstyled"></ul>
    </li>
</ul><!-- /.menu-sortable -->

JS：

$('.sortable').sortable({ 
    connectWith:    '.sortable',
    cursor:         'move',
    placeholder:    'sortable-placeholder',
    handle:         '.block-title',
    cursorAt:       { left: 150, top: 17 },
    tolerance:      'pointer',
    scroll:         false,
    zIndex:         9999,
});
$('.sortable').disableSelection();

这里有解决方案：How to make jQuery UI sortable with Nested dropdown menu work? ，但我不需要另一个插件。

更新：
问题：Index拖入SEO. 他们都有<ul class="sortable list-unstyled"></ul>

Answer 1

我将其添加到小提琴上的样式表中：

.sortable ul { 
   padding: 5px;
}

它解决了无法增加深度的问题。我还建议通过删除公差参数来稍微更改您的 JavaScript，这使得添加深度变得更容易一些。

$('.sortable').sortable({ 
    connectWith:    '.sortable',
    cursor:         'move',
    placeholder:    'sortable-placeholder',
    handle:         '.block-title',
    cursorAt:       { left: 150, top: 17 },
    /*tolerance:      'pointer',*/
    scroll:         false,
    zIndex:         9999,
});
$('.sortable').disableSelection();

如果间距太宽，您可以将填充减少到 3px，但任何低于该值的内容都会变得越来越难以管理深度级别。