为什么 Draggable 对象的占位符很慢？

Question

我真的没有问题，但是我注意到有时 Draggable 对象的占位符很慢。

我做了这个测试：http://jsfiddle.net/X3Vmc/

    $(function () {         
        $("#myproducts li").draggable({
            /*appendTo: "body",*/
            helper: "clone",
            connectToSortable: "#mylist",
            tolerance: "pointer"
        });
        $("#mylist").sortable({
            placeholder: "sortable-placeholder", 

            over: function () {
                console.log("over");

            },
            out: function () {
                console.log("out");
            }
        });
    });

在可拖动对象中添加列表对象很容易，但当我尝试在可拖动对象中移动元素时，我发现红色占位符移动缓慢。

我的意思是有时水平移动一个元素，占位符会保留更多时间来移动（以更新其位置）。我必须在新位置周围移动鼠标以更新占位符的位置。我想让它更具反应性。这可能吗？

编辑：

看一下图片。正如你所看到的，我正在第一个和第二个位置之间移动一个元素（从第四个位置）。如您所见，占位符离那里很远。

编辑 2：

我正在使用 * Chromium 30.0.1599.114 Ubuntu 13.10 (30.0.1599.114-0ubuntu0.13.10.2)*

Answer 1

如果您在 Sortable 对象中添加一个空的 <li></li>，您有权解决问题。

我认为这是一个可行的解决方案，无论出于何种原因，Sortable 对象在初始化可排序对象时只需要一个可排序项目。我相信答案的核心是：The sortable needs to know what kind of elements it is going to be sorting when initialized in order for the placeholder to work properly. Therefore if you are going to be sorting li elements, you should initialize the sorter with at least 1 li element in the Sortable object.

我相信是这种情况，因为我尝试将空的 <li> 替换为空的 <div>，但这并没有解决问题。

您的解决方案目前只有两个小问题。拖动可拖动对象时仍会考虑空的<li>。可以看到，draggable 可以排序到empty li 的左侧和右侧，这看起来很有趣。您也可以拖动empty li，这可能会引起一些混乱。

但幸运的是，解决此问题的方法非常简单。 li 只需要在初始化时处于可排序状态。之后我们可以将其删除，一切正常！

HTML - 可使用 li 元素排序。

<ul id="mylist">            
    <li></li>       
</ul>

jQuery

$(function () {         
    $("#myproducts li").draggable({
        /*appendTo: "body",*/
        helper: "clone",
        connectToSortable: "#mylist",
        tolerance: "pointer"
    });
    $("#mylist").sortable({
        placeholder: "sortable-placeholder"     

    });
    $("#mylist").empty();  //remove the empty li - only needed for initialization
});

FIDDLE

Answer 2

我假设来自“Draggable”的处理程序仍然附加，并且不同意/导致“Sortable”处理程序出现故障。这导致缺乏响应能力。

在将处理程序放入 Sortable 后摆脱处理程序，或者完全克隆/重新创建 DOM 元素 - 可能通过将 innerHtml 复制到新的 DOM 元素或类似的方式。