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

Share Improve this question Follow asked Oct 11, 2011 at 15:42 RS7RS7 2,36188 gold badges3434 silver badges5959 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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