当前位置：文江博客话题详情

jQuery 可排序 - 连接问题

发布于 2024-11-09 15:24:41 字数 490 浏览 4 评论 0原文

我在 jsFiddle 上有两个示例：

示例 1

在第一个中，我可以移动列表元素，甚至从子元素到根元素。然而，要让它“啪”的一声，却并不是一件容易的事。

示例 2

在第二个示例中，我浮动了列表元素。这次我无法让它们“捕捉”到子元素。

问题

有没有什么好方法可以让拍摄变得更容易？
怎么用float来解决呢？

原文

分享到QQ

分享到微博

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

发布评论

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

愛上了 2024-11-16 15:24:41

jQuery sortable 中有一个迄今为止未记录的选项来定义检查容差的元素：toleranceElement。如果未设置，则会检查整个项目的位置（包括嵌套列表），但如果设置了，则仅考虑与选择器匹配的子项目。

这意味着您必须稍微更改 HTML 标记，以将列表项的主要内容（在您的情况下为项目文本）包装在元素中，并使用它来检查排序位置。这将省略嵌套的

HTML：

<div id="example5"> 
    <ul> 
        <li ><div>Item 1</div>
            <ul> 
                <li ><div>Item 1 1</div><ul></ul></li> 
                <li ><div>Item 1 2</div><ul></ul></li> 
                <li ><div>Item 1 3</div><ul></ul></li> 
            </ul> 
        </li> 
        <li ><div>Item 2</div><ul></ul></li> 
        <li ><div>Item 3</div><ul></ul></li> 
        <li ><div>Item 4</div><ul></ul></li> 
    </ul> 
</div>

Javascript：

$("#example5 ul").sortable({
    connectWith: "#example5 ul",
    placeholder: "ui-state-highlight",
    toleranceElement: 'div'
});

尝试修改后的演示此处和此处。

您可能还想使用 opacity、cursorAt 和 tolerance。查看文档。

请注意，这不是一个完美的解决方案，如果您对结果不满意，请考虑使用插件。 Manuele J Sarfatti 的 nestedSortable 插件看起来可能对您有用：http:// /mjsarfatti.com/sandbox/nestedSortable/

There is a so far undocumented option in jQuery sortable to define the element against which tolerance is checked: toleranceElement. If not set, the whole item is checked for placement (including the nested list), but if it's set, only sub-items matching the selector are taken into account.

This means you have to change your HTML markup a bit to wrap the main content of the list item (the item text in your case) in an element and use that to check for sort positioning. That will leave out the nested <ul>s, effectively stopping jittering which is otherwise quite serious.

HTML:

<div id="example5"> 
    <ul> 
        <li ><div>Item 1</div>
            <ul> 
                <li ><div>Item 1 1</div><ul></ul></li> 
                <li ><div>Item 1 2</div><ul></ul></li> 
                <li ><div>Item 1 3</div><ul></ul></li> 
            </ul> 
        </li> 
        <li ><div>Item 2</div><ul></ul></li> 
        <li ><div>Item 3</div><ul></ul></li> 
        <li ><div>Item 4</div><ul></ul></li> 
    </ul> 
</div>

Javascript:

$("#example5 ul").sortable({
    connectWith: "#example5 ul",
    placeholder: "ui-state-highlight",
    toleranceElement: 'div'
});

Try your modified demos here and here.

You might also want to play with opacity, cursorAt and tolerance. Have a look at the documentation.

Note that it's not a perfect solution, in case you're not satisfied with the results, have a look at using a plugin. Manuele J Sarfatti's nestedSortable plugin looks like something that might be of use for you: http://mjsarfatti.com/sandbox/nestedSortable/

回复收藏 0 原文