为什么Draggable对象具有缓慢的占位符?

Dai*_*ail 8 javascript jquery jquery-ui jquery-ui-sortable jquery-draggable

我真的没有问题但是,我注意到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");
            }
        });
    });
Run Code Online (Sandbox Code Playgroud)

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

我的意思是,有时候水平移动元素,占位符会有更多时间移动(更新其位置).我必须在新位置移动鼠标以更新占位符的位置.我想让它更具反应性.这可能吗?

编辑:

在此输入图像描述

看一下图片.如你所见,我正在第一个和第二个位置之间移动一个元素(从第四个位置).正如您所看到的,占位符远离那里.

编辑2:

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

Tre*_*vor 5

你的权利,如果你<li></li>在Sortable对象中添加一个空来解决问题.

我认为这是一个可行的解决方案,无论出于何种原因,Sortable对象在初始化sort-able时只需要一个可排序项.我相信答案的核心是: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>
Run Code Online (Sandbox Code Playgroud)

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
});
Run Code Online (Sandbox Code Playgroud)

小提琴