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.

Answer 3

In my case the problem arose when the sortable was a Flexbox container.

It doesn't matter whether the sortable is populated with items or not, whether is it a <div>, <li> or <something-else>.

Example: http://jsfiddle.net/X3Vmc/27/

---

jQuery UI Issue tracker

It turns out that there are already opened bug reports on the jQuery UI Forum that are related to using flexbox in sortables: https://bugs.jqueryui.com/search?q=flexbox

Unfortunately I couldn't create a new one https://bugs.jqueryui.com/newticket :(

Hey, anybody from jQuery UI team, if you read this, please explain why you're still using that ugly forum from the 90's instead of GitHub Issues?

This issue is very annoying as we have flexbox items all over the place

---

Workaround

Yeah, there is, an ugly, dirty, workaround:

http://jsfiddle.net/X3Vmc/28/

Just never connect draggables with sortables unless the issue is sorted out by jQuery UI team or maybe someone contribute and make a Pull Request.

Even if you have a single draggable, wrap it with a div, intialize it as sortable and connect that div to other sortables. It will behave as draggable and work without issues.

---

Buggy jQuery UI Sortable

Unfortunately after a few dragging around among sortables a new issue arose, see the pic.

So I have to restate my workaround: don't use jQuery UI Sortable with Flexbox containers. Well, there is a kludge, just add this horrible piece of sh*t to the options of the sortable:

stop(event, ui) {
    ui.item.css('display', '')
},

In other words, clean up the sh*t left after it

Example: http://jsfiddle.net/X3Vmc/29/

Seriously, time to consider searching alternative library instead of using that outdated crap.