JQuery Sortable - 处理 IE 中的错误？答案

【问题标题】：JQuery Sortable - Handle bug in IE?JQuery Sortable - 处理 IE 中的错误？
【发布时间】：2012-03-09 00:42:42
【问题描述】：

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

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

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

有人有其他想法吗？

【问题讨论】：

【解决方案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);
}

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

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

【讨论】：

它在 IE 7 > 9 中对我有用...你在 javascript 控制台中有错误吗？
不，我使用了您的代码，没有错误 - 如果您单击左侧的文本并拖动，它会突出显示文本；不拖 - 很好地抓住了逗号！
插件提供了一个方法disableSelection()来避免这种情况。我已经更新了小提琴。
感谢您的快速响应 - 很好的逗号捕捉，尽管我仍然在您提供的最新演示中看到根本问题。我看到您正在禁用文本选择，但是如果您拖动文本，则不会发生排序。还有其他想法吗？
@DidierGhys - 我也在查看不透明度。有一个解决边框问题的方法：在句柄内放置一个跨度，其中有一个 &nbsp;，并给它一个显示：块，100% 宽度；和你描述的不透明度 css...虽然有点 hack

【解决方案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;
}

如果你想在排序句柄上保留边框，请使用这个

【讨论】：