Refresh Helper Position

Question

I'm using jquery sortable to sort elements across multiple containers.

I have helper option set to 'clone' like so

$("#sup").sortable({
   helper: "clone"
});

So what goes on here is that when an element starts dragging, jQuery creates a duplicate and appends it to the body, and that becomes the element thats actually being dragged(the helper), not the original.

My helper may change position when dragging starts. However, jQuery thinks that the helper is where it put it, even though I changed it's position using margin, when dropping the element within a container the helper is not actually over it(since I changed helper position).

Question: How can I have jQuery re-calculate the position of the helper after I changed it?

$("#sup").sortable({
   helper: "clone",
   start: function(event, ui) {
       var marginsToSet = ui.item.data().sortableItem.margins;

       // helper position changed
       ui.helper.css('margin-left', marginsToSet.left);
       ui.helper.css('margin-top', marginsToSet.top);
   }
});

Example: http://codepen.io/anon/pen/qZaNJZ You can see that the placeholder highlight will go to the next container, even when it's not completely hovering it. Because the block position isn't what jquery set.

Refresh Helper Position

1 Answers