Javascript jQuery排序表-连接问题

我有两个关于JSFIDLE的例子：

示例1

在第一个示例中，我可以将列表元素四处移动，甚至可以从子元素移动到根元素。然而，要让它“啪”的一声响并不容易

示例2

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

问题

• 有没有一个好办法让它更容易折断
• 我如何用float解决它

---

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

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

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

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

我能想到的解决问题的唯一方法是简单地将示例2中的项目提高，从而模拟示例1中的项目，除了侧面

---

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

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

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

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

我能想到的解决问题的唯一方法是简单地将示例2中的项目提高，从而模拟示例1中的项目，除了侧面

---

jQuery sortable中有一个迄今未记录的选项，用于定义检查公差的元素：

toleranceElement

。如果未设置，则检查整个项的放置（包括嵌套列表），但如果已设置，则只考虑与选择器匹配的子项

这意味着您必须稍微更改HTML标记，以将列表项的主要内容（案例中的项文本）包装到元素中，并使用该内容检查排序位置。这将省去嵌套的

s，有效地停止抖动，否则抖动会非常严重

HTML:

尝试修改后的演示和

您可能还想玩

不透明度

、

光标

和

公差

。看一看这张照片

---

请注意，这不是一个完美的解决方案，如果您对结果不满意，请查看使用插件的情况。Manuele J Sarfatti的

nestedSortable

插件看起来可能对您有用：

在jQuery sortable中有一个到目前为止尚未记录的选项，用于定义检查公差的元素：

toleranceElement

。如果未设置，则检查整个项的放置（包括嵌套列表），但如果已设置，则只考虑与选择器匹配的子项

这意味着您必须稍微更改HTML标记，以将列表项的主要内容（案例中的项文本）包装到元素中，并使用该内容检查排序位置。这将省去嵌套的

s，有效地停止抖动，否则抖动会非常严重

HTML:

尝试修改后的演示和

您可能还想玩

不透明度

、

光标

和

公差

。看一看这张照片

---

请注意，这不是一个完美的解决方案，如果您对结果不满意，请查看使用插件的情况。Manuele J Sarfatti的

nestedSortable

插件看起来可能对您有用：

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

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

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