8

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:

enter image description here

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

Trevor
  • 16,080
  • 9
  • 52
  • 83
Dail
  • 4,622
  • 16
  • 74
  • 109
  • 1
    Browser & version are probably particularly relevant details to consider such a question? Works fine for me in Chrome 31.0. – Thomas W Nov 24 '13 at 22:52
  • @ThomasW please take a look at the image. I also edited the question adding browser information. – Dail Nov 24 '13 at 22:55
  • 1
    You're right, re-ordering the blocks in 'Sortable' is clunky. Is it as clunky as this, if the blocks are built into the list from the start rather than being dragged there? jQueryUI example doesn't seem clunky like this. – Thomas W Nov 24 '13 at 22:58
  • 2
    @thenewseattle -- if you drag blocks from 'My List' in to 'My Sortable' and then try to reorder then in 'My Sortable', it seems clunky. This is the symptom the OP is asking about. – Thomas W Nov 24 '13 at 22:58
  • @ThomasW You are right! If the blocks are built into the list the placeholder works perfectly! Please see it: http://jsfiddle.net/X3Vmc/2/ – Dail Nov 24 '13 at 23:02
  • @ThomasW do you have any idea how to solve it? Because I Must drag and drop element from "My List" to "My Draggable" – Dail Nov 24 '13 at 23:08
  • 1
    @ThomasW Exactly that's what I did. and it works fine in Chrome! – thenewseattle Nov 24 '13 at 23:12

3 Answers3

5

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

Trevor
  • 16,080
  • 9
  • 52
  • 83
1

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.

Thomas W
  • 13,940
  • 4
  • 58
  • 76
  • but it is strange, because as you can see I am using "clone" as halper, it should create a new element no? – Dail Nov 25 '13 at 09:14
  • Thomas, I have noticed that if I add an empty
  • inside Sortable object I see no errors! Hmmm should it be a solution? – Dail Nov 25 '13 at 11:44