jQuery Sortable List Handles on Hover

Question

Я создаю список с ручками для сортировки. Мне не нравится эстетика наличия 20 ручек, поэтому я пытаюсь сделать ручки появляться только тогда, когда мышь нависает над элементом списка.

Это была моя первая попытка:

jsFiddle #1

Как вы можете видеть, зависший над элементами списка создает довольно резкий движение и перекос элементов списка. Чтобы исправить это, я создал пустое 16-кратное изображение, которое я использую для замены дескриптора, когда он не отображается. Это создает намного более хороший пользовательский опыт, чем парит, как вы можете увидеть здесь:

jsFiddle #2

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

Проблема заключается в том, что во время сортировки 16px изображение часто исчезает, оставляя вещи из выравнивания. (Я бы опубликовал изображение, но у меня нет репутации.) Это не всегда происходит, но, похоже, происходит чаще, когда я сортируюсь очень быстро.

Хотелось бы узнать, почему это происходит и как это исправить. Благодаря!

Answer 1

Вы должны установить положение свойства css элемента значка в абсолютное. Это должно дать вам идею:

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