Tolérance de tri de l'interface utilisateur jQuery

Question

Je rencontre des problèmes pour obtenir un bon fonctionnement des triables de l'interface utilisateur jQuery.

La tolérance que je définis ne fonctionne pas toujours correctement. Par exemple, si je la règle sur 'pointeur', l'objet peut parfois être superposé (souris incl.) Et il ne sera pas réorganisé. Il faut parfois que je bouge l'objet pour le réordonner.

Y at-il quelque chose qui est nécessaire pour fonctionner correctement ou tout ce qui peut provoquer sa rupture? (? marges, flotteur, certains éléments, éléments positionnés absolus, etc.)

Le code est à moi est fondamentalement quelque chose comme ceci (ancre abs positionné.):

<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

Un jsFiddle serait bien avec votre code triable si les suggestions suivantes ne fonctionnent pas pour vous.

1) utilisent tolerance pointer et do not use containment

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

2) use a placeholder

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

"sortable-espace réservé" est une classe que vous définissez dans votre feuille de style. Assurez-vous que l'espace réservé a la même largeur et la même hauteur que l'élément que vous essayez de déplacer.

3) force a placeholder size

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

4) force a helper size

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

5) Float vos éléments li gauche ou à droite

Answer 2

Je trouve que c'était la seule chose qui a aidé dans ma situation :

helper: "clone"