javascript - 悬停时的 jQuery 可排序列表句柄

Question

我正在创建一个带有排序句柄的列表。我不喜欢 20 个可见 handle 的美观，因此我尝试使 handle 仅在鼠标悬停在列表项上时才出现。

这是我的第一次尝试:

jsFiddle #1

正如您所看到的，将鼠标悬停在列表中的项目上会产生相当不和谐的移动和列表项目的错位。为了解决这个问题，我创建了一个空白的 16px 图像，当 handle 不可见时，我用它来替换它。它创造了比悬停更好的用户体验，正如您在此处看到的:

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