为什么Draggable对象具有缓慢的占位符？ [英] Why does Draggable object have slow placeholder?

问题描述

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

我做了这个测试：

I really do not have a problem but, I have noticed that sometime the Draggable object has slow placeholders.

I did this test: 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");
            }
        });
    });

Adding object of the list in the draggable is easy without problem, but when i try to move an element in the draggable object i see that someting the red placeholder is slow to move.

I mean that sometime moving horizontally an element the placeholder keep more time to move (to update its position). I have to move the mouse around the new position to update the position of the placeholder. I would like to have it more reactive. Is this possible?

EDIT:

Take a look at the image. As you can see i was moving an element (from fourth position) between the first and the second position. As you can see the placeholder is far from there.

EDIT 2:

I am using * Chromium 30.0.1599.114 Ubuntu 13.10 (30.0.1599.114-0ubuntu0.13.10.2)*

解决方案

Your right that if you add an empty <li></li> inside the Sortable object that it resolves the issue.

I think that it is a viable solution, for whatever reason the Sortable object just needs a sort-able item in it when the sort-able is initialized. I believe the heart of the answer is this: 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.

I believe this to be the case because I tried replacing the empty <li> with and empty <div> and that did not fix the problem.

Your solution currently only has two minor issues. The empty <li> is still accounted for when dragging the draggable. You can see that the draggable can sort to the left and the right of the empty li which kinda looks funny. Also you can drag the empty li which can cause some confusion.

But luckily the work around for this is really simple. The li just needs to be in the sortable when its initialized. We can remove it after and everything works great!

HTML - sortable with li element.

<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

这篇关于为什么Draggable对象具有缓慢的占位符？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！