jQuery 嵌套排序

发布于 2024-12-02 14:39:50 字数 1411 浏览 1 评论 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'
    });

我觉得这应该足以提供拖动列表元素的功能。知道为什么它不起作用吗？

原文

I am trying to use the jQuery.nestedSortable plugin from here, and its not working.

It works in the website, but even when I view the page source, and save it as HTML, it does not work.

Here's my code:

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'
    });

I feel this should be enough to provide the functionality to drag the list elements. Any idea on why its not working?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

热鲨 2024-12-09 14:39:50

您的 HTML 结构错误，内部

的内部，而不是之后。

<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/ambigously/bGuEc/

Your HTML structure is wrong, the inner <ol> elements are supposed to be inside the <li>, not after.

<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>

Demo: http://jsfiddle.net/ambiguous/bGuEc/

回复收藏 0 原文

荒路情人 2024-12-09 14:39:50

我认为问题是您的 HTML 标记无效。您必须在标记之后结束标记。像这样：

  <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>

I think the problem is that your HTML markup is invalid. You have to end your </li> tags after the </ol> tags. Like this:

  <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>

回复收藏 0 原文

~没有更多了~