懸停上的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);