javascript - jQuery sortables - 连接问题

Question

我有两个关于 jsFiddle 的例子:

• > http://jsfiddle.net/9uhfX/1/
• > http://jsfiddle.net/9uhfX/2/

示例 1

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

示例 2

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

问题

• 有没有什么好方法可以让它更容易捕捉？
• 如何用 float 解决？

Answer 1

到目前为止，jQuery sortable 中有一个未记录的选项，用于定义检查公差的元素:toleranceElement .如果未设置，则检查整个元素的放置(包括嵌套列表)，但如果设置，则仅考虑与选择器匹配的子元素。

这意味着您必须稍微更改 HTML 标记以将列表项的主要内容(在您的案例中为元素文本)包装在一个元素中，并使用它来检查排序定位。这将忽略嵌套的 <ul> s，有效地停止抖动，否则会非常严重。

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

尝试修改后的演示 here和 here .

您可能还想玩一下 opacity , cursorAt和 tolerance .看看 documentation .

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