Question

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

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，但是低于此值的任何东西都越来越难以管理深度级别。

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

1 个答案: