3

我正在创建一个带有用于排序的句柄的列表。我不喜欢有 20 个可见手柄的美感，所以我试图让手柄仅在鼠标悬停在列表项上时出现。

这是我的第一次尝试：

jsFiddle #1

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

jsFiddle #2

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

问题是在对 16px 图像进行排序的过程中，它经常会消失，从而导致无法对齐。（我会发布一张图片，但我没有声誉。）它并不总是发生，但当我快速排序时似乎更频繁地发生。

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

4

1 回答 1

0

您应该将图标元素的位置 css 属性设置为绝对。这是给你的想法：

看演示

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);
于 2013-05-29T09:37:15.283 回答