0

I was looking for an answer for this, and haven't found one yet.

I have a system with bootstrap and jQuery sortable, the thing is that when I move an element from one list to another the element is like moving slower than the mouse cursor, it's like gaining gap between the cursor and the element, and when I get to the other list, the placeholder appears when the mouse is near but not on the exact position of the placeholder, and the element is several pixels behind

I made a video with a quick example to see https://youtu.be/MhxAhIDUj3Y

More information on this I'm using a bootstrap panel inside the LI element, the markup is like this

<li class="ui-sortable-handle" style="display: list-item;">    
    <div class="panel panel-default span4">
    </div>
</li>

The options that I use on sortable are this

    placeholder: 'ui-sortable-placeholder',
    connectWith: ".connectedSortable",
    helper: 'clone',
    scroll: false,
    start: function(e, ui){
        ui.placeholder.height(ui.item.height());
    }

Do you know what is going on to get this strange mouse gap between the cursor and the element?

Here's a working fiddle reproducing the behavior https://jsfiddle.net/3jj6k7bm/

Any help will really be appreciated, thank you

Juanchi
  • 3
  • 2

1 Answers1

0

That's caused by having the zoom on the <body> set to 80%. The element is in fact moving just as much as the cursor, but since the <body> is zoomed out it seems to be moving less. To further prove this, I made another fiddle with body{zoom: 180%;}: https://jsfiddle.net/3jj6k7bm/2/ you'll see that the opposite happens: the element seems to move faster than the cursor.

Change the zoom to 100% and it should be fixed.

Emilio Venegas
  • 546
  • 5
  • 22
  • Thank you very much Emilio, your suggestion solved my problem! But now Im thinking, why can't I use the zoom on the body, maybe it's a bug on the sortable? or its by design that cannot be set when using sortable – Juanchi Jan 14 '17 at 15:21
  • @Juanchi I think the issue is that all the jQuery UI functions that involve a "draggable" behavior, including `.draggable()` itself, base the position of the element while dragging on how much your cursor has moved relative to the starting position, not actually on the current position of it. It's hard to explain, but it kind of makes sense if you think of it – Emilio Venegas Jan 14 '17 at 15:34
  • Anyway, [here's](http://stackoverflow.com/questions/8605439/jquery-draggable-div-with-zoom/8605589) a nice turnaround for this to make the `.draggable()` function work regardless of the current zoom, you can probably get it to work with `.sortable()` too – Emilio Venegas Jan 14 '17 at 15:35