jQuery sortables - 连接问题答案

【问题标题】：jQuery sortables - connect problemjQuery sortables - 连接问题
【发布时间】：2011-05-24 18:59:51
【问题描述】：

我在 jsFiddle 上有两个例子：

示例 1

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

示例 2

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

问题

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

【问题讨论】：

我不明白这个问题。在您的两个示例中，我能看到的唯一区别是一个是水平的，另一个是垂直的。我可以将元素移入/移出两个孩子。
我可以在第二个中并排移动它们，但是将它们移动到其他元素内部会出现问题。
在我看来（使用 Safari），它们的工作方式 100% 相同。 #2 更难使用，因为它的布局有一个较小的“放置区”。

标签： javascript jquery html css sortables

【解决方案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/

【讨论】：

【解决方案2】：

我正在 Safari 中查看您的两个示例，我可以将任何元素移入/移出子元素，而不会出现大问题。

这就是为什么 #2 更难使用...

示例 #2 中的“放置区”仅与您的元素一样高，因此对于较短的元素，可以让您的鼠标进入的区域要小得多。

示例 #1 中的“放置区”非常宽，因此当您在列表中上下移动鼠标时很容易点击它。

我能想到的解决您的问题的唯一方法是简单地使示例 #2 中的物品更高，从而模拟示例 #1 中的物品，除了它的侧面。

http://jsfiddle.net/9uhfX/3/

【讨论】：