I'm having some trouble getting smooth operation of jQuery UI sortables.

The tolerance I set doesn't always work correctly - for example, if I set it to 'pointer', sometimes I could have the object almost on top of another (mouse incl.) and it won't reorder. Some time I have to jiggle the object to get it to reorder.

Is there anything that is required to work correctly or anything that can cause it to break? (margins, float, certain elements, absolute positioned elements, etc?)

The code I have is basically something like this (anchor as abs. positioned):

<div span="span-12 prepend-top last">
    <ul id="fileupload-images" class="ui-sortable">
        <li class="image span-3" id="38b22e1c130d9c33fafb20e7ac16c038">
            <img class="thumb span-3 last" src="/uploads/3/8/b/38b22e1c130d9c33fafb20e7ac16c038/38b22e1c130d9c33fafb20e7ac16c038.jpg">
            <a href="#" class="zoom"></a>
            <a href="#" class="remove"></a>
        </li>
    </ul>
</div>

I'm having some trouble getting smooth operation of jQuery UI sortables.

The tolerance I set doesn't always work correctly - for example, if I set it to 'pointer', sometimes I could have the object almost on top of another (mouse incl.) and it won't reorder. Some time I have to jiggle the object to get it to reorder.

Is there anything that is required to work correctly or anything that can cause it to break? (margins, float, certain elements, absolute positioned elements, etc?)

The code I have is basically something like this (anchor as abs. positioned):

<div span="span-12 prepend-top last">
    <ul id="fileupload-images" class="ui-sortable">
        <li class="image span-3" id="38b22e1c130d9c33fafb20e7ac16c038">
            <img class="thumb span-3 last" src="/uploads/3/8/b/38b22e1c130d9c33fafb20e7ac16c038/38b22e1c130d9c33fafb20e7ac16c038.jpg">
            <a href="#" class="zoom"></a>
            <a href="#" class="remove"></a>
        </li>
    </ul>
</div>

• javascript
• jquery-ui
• jquery-ui-sortable

2 Answers 2

I found that this was the only thing which helped in my situation:

helper: "clone"

A jsfiddle would be great with your sortable code if the following suggestions do not work for you.

1) use tolerance pointer and do not use containment

$( ".selector" ).sortable({ tolerance: "pointer" });

2) use a placeholder

$( ".selector" ).sortable({ placeholder: "sortable-placeholder" });

"sortable-placeholder" is a class you define in your stylesheet. Make sure the placeholder is the same width and height as the element you are trying to move over.

3) force a placeholder size

$( ".selector" ).sortable({ forcePlaceholderSize: true });

4) force a helper size

$( ".selector" ).sortable({ forceHelperSize: true });

5) Float your li elements left or right