JQuery Sortable - 处理 IE 中的错误？

Question

我有一个 div 列表，我希望能够对其进行排序。每个 div 中都有文本，并且内部还有一个句柄（由于 UI，我只想在拖动列表项的左半部分时进行排序）。在 Chrome/FireFox 中，这效果很好，但在 IE 中，如果您单击文本，它不会让您排序，即使文本位于句柄内。

我在这里有一个问题的简化模型，请确保使用 Internet Explorer 进行测试： http://jsfiddle.net/ t8Ebd/

我假设这是一个分层的事情，但尝试了以下方法但没有成功：

• 更改文本的 z 索引并处理
• $(".itemname").disableSelection();
• ms-用户选择：无；用户选择：无；
• 将文本类添加到句柄列表中 - 这解决了问题，但对我不起作用，因为我不希望列表项右半部分的文本触发排序
• 在句柄上设置背景颜色 - 我知道这一点听起来很奇怪，但如果我设置一种颜色，那么它就会成为最上面的元素，从而正确地运行，尽管它隐藏了对我不起作用的文本。

大家还有其他想法吗？？

Answer 1

在“.sorthandle”后面有一个额外的逗号，在 IE 中会中断：

$("ul").sortable({
    handle: ".sorthandle",  // here
});

将其更改为：

$("ul").sortable({
    handle: ".sorthandle"
});

---

我在评论中建议使用 jQuery UI 中的方法 disableSelection() 。尽管它似乎也不太有效。

我已经通过将手柄的背景颜色设置为零并将不透明度设置为零来实现您想要的目标：

.sorthandle {
    ...
    background-color: White;
    opacity: 0;
    filter: alpha(opacity = 0);
}​

DEMO

当然这会删除你的绿色边框，我不知道这是否重要。

也许这可以通过使用 png 透明背景图像来实现。我的猜测是手柄没有背景，IE 选择下面的文本。

Answer 2

将布局更改为：（有点黑客）

<div class='sorthandle'><span> </span></div>

并添加此 css：

 .sorthandle span{
    width:100%;
    background-color:blue;
    opacity:0.0;
    filter:alpha(opacity=0);
    display:block;
}

如果您想将边框保留在排序句柄上，请使用此