jQuery可排序列表句柄悬停

Question

我正在创建一个排序处理列表。我不喜欢有20个句柄可见的美学，所以我试图使句柄只在鼠标悬停在列表项上时出现。

这是我第一次尝试:

jsFiddle # 1

正如您所看到的，将鼠标悬停在列表中的项上，会导致列表项的移动和不对齐。为了解决这个问题，我创建了一个空白的16px图像，当它不可见时，我用它来替换手柄。它创造了比悬停更好的用户体验，正如你在这里看到的:

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属性为绝对。这是给你的想法:

看到演示

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