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

【问题标题】：jquery ui sortable nested multi level menu orderjquery ui可排序嵌套多级菜单顺序
【发布时间】：2014-12-16 23:24:21
【问题描述】：

我正在尝试重新排序 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>

【问题讨论】：

“但一切都乱七八糟”不是问题描述。究竟是什么不工作？我可以在不同级别之间移动项目...
@TilwinJoy 你能把索引放到 SEO 中吗？ SEO 有内部 ul.sortable，但是当我尝试将其拖放到那里时它是不可能的。
另一个问题是，当我将所有服务拖出服务时，无法将它们放入其中。
将index 或about us 移动到services 时，占位符会出现类似振动的行为。你解决了吗？

标签： jquery jquery-ui jquery-ui-sortable

【解决方案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();

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

【讨论】：