JQuery UI Sortable Tolerance

Question

I am having problems with the smooth operation of JQuery UI sorters.

The tolerance that I set does not always work correctly - for example, if I set it to a "pointer", sometimes I could have an object almost on top of another (mouse on) and it would not change. For some time I have to move the object to make it reorder.

Is there anything that is required for proper operation or anything that can cause it to break? (fields, float, some elements, elements with an absolute location, etc.?)

The code I have is basically like this (anchored as abs.):

<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> 

Answer 1

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

1) use a tolerance pointer and do not use deterrence

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

2) use a placeholder

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

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

3) force the size of the placeholder

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

4) force the auxiliary file to be configured

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

5) Swim your li elements left or right

Answer 2

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

 helper: "clone"