jQuery UI sortable is inaccurate when dragging

Question

I'm having problems with the jQuery UI Sortable Widget with it being a bit inaccurate to where elements are dropped.

Example:

---

HTML:

<div class="Container">
    <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div>
    <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div>
    <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div>
    <div class="Item"><img src="https://www.google.com/images/errors/logo_sm_2.png" /></div>
</div>

CSS:

div.Container {
    clear: both;
}
div.Container div.Item {
    float: left;
    display: block;
    padding: 5px 5px 2px 5px;
    background-color: #ccc;
    border: solid 1px #aaa;
    border-radius: 5px;
    margin: 0 10px 10px 0;
}
div.Container div.Item img {
    width: 30px;
    height: auto;
    border: solid 1px #888;
}

JS:

$(document).ready(function() {
    $('div.Container').sortable({
        revert: true,
        cursor: 'move'
    });
});

JSFiddle: http://jsfiddle.net/ghdbxj7t/

---

Try to drag an element straight down (below the other elements), then to the right past the last element, then up to be in line with the elements again.

This causes the original element placeholder to be stuck in its place and will not move any of the other elements around.

If you then drag the element perfectly in line (horizontally) with the last element you can get almost on top of the last element before it switches (and sometimes I can even get further).

---

This example is similar to what I'm experiencing on my own site, but there the behavior is much more extreme. I can drag the first element horizontally over all the other elements and they sort just fine except the last element which is extremely sensitive as to when to allow itself to be sorted.

The HTML and CSS on my site is pretty much exactly as in the JSFiddle.

What can I do to make the dragging more accurate so that elements dragged past the last item gets sorted immediately instead of having to drag it multiple times over the last item to get it to understand that I want to place it there?

This behavior is tested in Chrome. I'm using jQuery 1.11.2 and jQuery UI 1.11.4 (JSFiddle doesn't seem to support those but the behavior in 1.9.1 is close to what I'm experiencing)

Answer 1

Since you've a horizontal sortable list, you can limit drag movement of the item by using axis option as follows

$(document).ready(function() {
    $('div.Container').sortable({
        revert: true,
        cursor: 'move',
        axis: "x"
    });
});

http://api.jqueryui.com/sortable/#option-axis

Answer 2

7 years old, but I think I may help. Ironically though, I came looking for answers as well and happened to fix it while messing with your jsfiddle. You probably have fixed it since then so this may be reference for others who have the problem.

You can help make it more accurate by adding the option tolerance and adding the value pointer to it.

Example Code:

$(document).ready(function() {
    $('div.Container').sortable({
        revert: true,
        cursor: 'move',
        tolerance: "pointer"
    });
});

What this does it make it so when your cursor is overlapping the other item, it will than start sorting it. Be default, it's intersect , which to me seems buggy, although it isn't buggy. Intersect pretty much makes it when the item is overlapping other elements, it sorts it. Which will seem very buggy when different items may be different sizes, may also seem buggy to edge items such as right, left, top, or bottom.