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

我正在创建一个带有排序句柄的列表。我不喜欢看到20个控制柄的美观，所以我试图使控制柄仅在鼠标悬停在列表项上时显示

这是我第一次尝试：

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

$（this）.prepend（“”）；

问题是，在排序过程中，16px的图像常常消失，导致图像不对齐。（我会发布一张图片，但我没有这样的名声。）这种情况并不总是发生，但在我快速排序时似乎发生得更频繁

---

我很想知道为什么会发生这种情况，以及如何解决它。谢谢

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

var$icon=$（“”）.css({
位置：'绝对'，
top:$（this）.offset（）.top+5，
左：$（此）.offset（）左-10
});
$（this）.prepend（$icon）；

谢谢！这确实解决了定位问题。然而，它感觉。。。神经过敏和手推车？分拣感觉不太顺畅。有没有想过为什么会这样以及如何解决？

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

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