javascript - 为什么 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");
            }
        });
    });

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

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

编辑:

看看图片。如您所见，我在第一和第二位置之间移动了一个元素(从第四位置开始)。如您所见，占位符离那里很远。

编辑 2:

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

Answer 1

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

我认为这是一个可行的解决方案，无论出于何种原因，当 Sort-able 被初始化时，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