悬停上的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

您应该将icon元素的位置css属性设置为absolute。 这是为了给你这个想法：

看看演示

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