jQuery Sortable Liste des poignées sur Hover

Question

Je crée une liste avec des poignées pour le tri. Je n'aime pas l'esthétique d'avoir 20 poignées visibles, donc j'essaie de faire apparaître les poignées seulement quand la souris survole un élément de la liste.

Ce fut ma première tentative:

jsFiddle #1

Comme vous pouvez le voir, planant au-dessus des éléments dans la liste crée un mouvement plutôt discordante et un mauvais alignement des éléments de la liste. Pour résoudre ce problème, j'ai créé une image vierge de 16 pixels que j'utilise pour remplacer la poignée quand elle n'est pas visible. Il crée une expérience utilisateur beaucoup plus agréable que planant, comme vous pouvez le voir ici:

jsFiddle #2

$(this).prepend("<img src=http://i.imgur.com/tzGrVLc.png class=\"blank-sprite\"/width=16 height=16 border=0>"); 

Le problème est que lors du tri de l'image de 16px disparaît souvent, laissant les choses hors de l'alignement. (Je posterais une image mais je n'ai pas la réputation.) Cela n'arrive pas toujours, mais cela semble se produire plus fréquemment quand je trie très rapidement.

J'aimerais savoir pourquoi cela se produit et comment y remédier. Merci!

Answer 1

Vous devez définir la propriété position css de l'élément icon sur absolute. C'est de vous donner l'idée:

SEE DEMO

var $icon = $("<span class=\"ui-icon ui-icon-grip-dotted-vertical\" style=\"display:inline-block\" id=\"handle\" /></span>").css({ 
      position:'absolute', 
      top:$(this).offset().top+5, 
      left:$(this).offset().left-10 
     }); 
$(this).prepend($icon);