0

我正在尝试从 这里使用 jQuery.nestedSortable 插件，但它不起作用。

它可以在网站上运行，但即使我查看页面源并将其保存为 HTML，它也不起作用。

这是我的代码：

HTML：

    <ol class="sortable">
        <li id="list_1"><div>A</div></li>
            <ol>
                <li id="list_2"><div>1</div></li>
                <li id="list_3"><div>2</div></li>
                <li id="list_4"><div>3</div></li>
                <li id="list_5"><div>4</div></li>
            </ol>
        <li id="list_6"><div>B</div></li>
            <ol>
                <li id="list_7"><div>1</div></li>
                <li id="list_8"><div>2</div></li>
            </ol>
    </ol>

javascript:

    $('ol.sortable').nestedSortable({
        disableNesting: 'no-nest',
        forcePlaceholderSize: true,
        handle: 'div',
        helper: 'clone',
        items: 'li',
        maxLevels: 2,
        opacity: .6,
        placeholder: 'placeholder',
        revert: 250,
        tabSize: 25,
        tolerance: 'pointer',
        toleranceElement: '> div'
    });

我觉得这应该足以提供拖动列表元素的功能。关于为什么它不起作用的任何想法？

4

2 回答 2

1

您的HTML 结构错误，内部元素<ol>应该在.<li>

<ol class="sortable">
    <li id="list_1"><div>A</div>
        <ol>
            <li id="list_2"><div>1</div></li>
            <li id="list_3"><div>2</div></li>
            <li id="list_4"><div>3</div></li>
            <li id="list_5"><div>4</div></li>
        </ol>
    </li>
    <li id="list_6"><div>B</div>
        <ol>
            <li id="list_7"><div>1</div></li>
            <li id="list_8"><div>2</div></li>
        </ol>
    </li>
</ol>

演示：http: //jsfiddle.net/ambiguous/bGuEc/

于 2011-09-04T03:50:17.390 回答
0

我认为问题在于您的 HTML 标记无效。您必须在</li>标签之后结束</ol>标签。像这样：

  <ol class="sortable">
        <li id="list_1"><div>A</div>
            <ol>
                <li id="list_2"><div>1</div></li>
                <li id="list_3"><div>2</div></li>
                <li id="list_4"><div>3</div></li>
                <li id="list_5"><div>4</div></li>
            </ol>
            </li>
        <li id="list_6"><div>B</div>
            <ol>
                <li id="list_7"><div>1</div></li>
                <li id="list_8"><div>2</div></li>
            </ol>
            </li>
    </ol>
于 2011-09-04T03:51:14.993 回答