Question

我在jsFiddle上有两个例子：

示例1

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

示例2

在第二个例子中，我已经浮动了列表元素。这次我不能让他们“抓住”子元素。

问题

有没有一种方法可以让它更容易拍摄？
如何使用float解决它？

Answer 1

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

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

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/

Answer 2

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

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

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

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

我能想到解决问题的唯一方法就是简单地让你的示例＃2中的项目更高，从而模拟你在示例＃1中所拥有的内容，除了它的一面。

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

jQuery sortables - 连接问题

2 个答案: