JQuery Sortable - 处理IE中的错误？

Question

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

我在这里找到了问题的精简模型，请确保使用Internet Explorer进行测试：http://jsfiddle.net/t8Ebd/

我认为这是一个分层的事情，但尝试了以下方法，没有运气：

• 更改文本和句柄的z索引
• $（ “ITEMNAME。”）disableSelection（）;
• ms-user-select：none;用户选择：无;
• 将文本类添加到句柄列表中 - 这解决了问题，但对我不起作用，因为我不希望列表项右半部分的文本触发排序
• 设置手柄上的背景颜色 - 我知道这听起来很奇怪，但是如果我设置了一个颜色，那么它就会成为最顶层的元素，因此它会正常运行，虽然它隐藏了对我不起作用的文本。

任何人都有其他想法吗？

Answer 1

在IE中打破“.sorthandle”之后你有一个额外的逗号：

$("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>&nbsp;</span></div>

并添加此css：

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

如果您想将边框保留在分类处理

，请使用此功能