Why does Draggable object have slow placeholder?

Question

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)*

Answer 1

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

Answer 2

I assume the handlers from "Draggable" are still attached, and are disagreeing with/ causing the "Sortable" handler to clunk. That's causing the lack of responsiveness.

Get rid of the handlers after it's dropped into Sortable, or clone/ recreate the DOM element altogether -- perhaps by copying the innerHtml into a new DOM element or somesuch.