jQuery UI 可排序容差

Question

我在 jQuery UI 可排序项的顺利操作方面遇到了一些麻烦。

我设置的容差并不总是正确工作 - 例如，如果我将其设置为“指针”，有时我可能会将对象几乎放在另一个对象（包括鼠标）之上，并且它不会重新排序。有时我必须摇动对象才能重新排序。

是否有任何需要正常工作的东西或可能导致其损坏的东西？ （边距、浮动、某些元素、绝对定位元素等？）

我的代码基本上是这样的（锚定为绝对定位）：

<div span="span-12 prepend-top last">
    <ul id="fileupload-images" class="ui-sortable">
        <li class="image span-3" id="38b22e1c130d9c33fafb20e7ac16c038">
            <img class="thumb span-3 last" src="/uploads/3/8/b/38b22e1c130d9c33fafb20e7ac16c038/38b22e1c130d9c33fafb20e7ac16c038.jpg">
            <a href="#" class="zoom"></a>
            <a href="#" class="remove"></a>
        </li>
    </ul>
</div>

Answer 1

我发现这是唯一对我的情况有帮助的事情：

helper: "clone"

Answer 2

如果以下建议不适合您，那么 jsfiddle 将非常适合您的可排序代码。

1）使用 容差指针 和 不要使用包含

$( ".selector" ).sortable({ tolerance: "pointer" });

2) 使用占位符

$( ".selector" ).sortable({ placeholder: "sortable-placeholder" });

“sortable-placeholder”是您在样式表中定义的类。确保占位符与您尝试移动的元素具有相同的宽度和高度。

3) 强制占位符大小

$( ".selector" ).sortable({ forcePlaceholderSize: true });

4) 强制辅助大小

$( ".selector" ).sortable({ forceHelperSize: true });

5) 向左或向右浮动 li 元素