Question

我正在创建一个包含句柄的列表。我不喜欢看到20个手柄的美感，所以我试图只在鼠标悬停在列表项上时才显示手柄。

这是我的第一次尝试：

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

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

问题在于，在排序期间，16px图像经常会消失，从而使事物不对齐。（我发布了一张图片，但我没有声誉。）它并不总是发生，但是当我排序很快时，似乎更频繁地发生。

我很想知道为什么会发生这种情况以及如何解决这个问题。谢谢！

Answer 1

您应该将icon元素的位置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);

悬停上的jQuery可排序列表句柄

1 个答案: