jquery ui 1.8.16 & firefox 6 - 可排序无法正常工作

Question

当我使用 jQuery（最新版本）开发应用程序时，我的 Firefox 浏览器决定将自身更新到版本 6。之后，我发现标准的 jquery ui“可排序”功能无法正常工作。我在 jquery 网站上尝试过，结果是一样的。尝试使用 jquery ui 包下载的演示文件=>相同的结果。没有 hack，没有 custo，只有香草。

症状如下：开始排序（通过单击并拖动鼠标），可排序元素粘在鼠标指针上。很好，直到那里。但是，当释放鼠标左键时，可排序元素会落在其最终位置，并且当我将鼠标移动到其他位置（没有单击鼠标按钮）时，最后一个已排序元素会突然粘回鼠标并随指针移动。

单击页面上的某个位置会将可排序元素移回到最终放置的位置，但是一旦我再次移动鼠标，该元素就会再次粘住并且不会放置。

有人用firefox 6遇到过这样的bug吗？

仅供参考，这个可排序功能在 FF 5.0 上发挥得非常出色

Answer 1

好吧伙计们！我找到了这种奇怪行为的根本原因！它的名称是 Firefox 的“FireQuery 1.0”插件。

当我看到 Guntram 告诉我他正在使用 FF6 和最新版本的 jQuery + jQuery-UI，完全没有任何问题时，我想知道这是否可以来自插件。因此，我禁用了所有内容，然后一一重新激活它们，每次启用后都重新启动。我发现了有罪的插件：FireQuery 1.0。

并不是说这个插件不好，但至少，如果您遇到与我相同的问题，至少现在您可能知道根本原因。 ;)

Answer 2

对我来说排序工作正常。
元素不会意外移动。

当我的元素中有一个项目（例如按钮或文本字段）时，什么也没有发生。
如果我右键单击该字段或按钮，则会出现光标（单击该按钮）。
当我退出 Windows 右键单击​​选项菜单时，我可以在文本字段中输入...

所以仍然是奇怪的行为。我不知道它在 ff5 上如何工作，我在 ff6 上，最新的 jquery 版本。

编辑：

在我发现这个之后：
http://weblogs.asp.net/jeffwids/archive/2011/01/31/jquery-textbox-in-sortable-is-not-clickable-selectable.aspx
我仔细研究了 jquery-sortable 提供的取消选项。

我终于可以这样解决它：

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><input type="text" value="text" ></input></li>
    <li class="ui-state-default" style="height: 70px;"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><textarea cols="20" rows="3">textarea</textarea></li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span><button>button</button></li>
</ul>
<script>
        // initialize the sortable including the cancel option
        $( "#sortable" ).sortable({cancel: 'input,button,textarea'});
</script>

Answer 3

我有同样的问题。经过一天的测试，我发现了问题所在以及导致此行为的原因。

让我首先向您展示我们在什么方面使用可排序类。

-----------
| Header  |
-----------
|         |
|Contents |
-----------

标题可拖动。如果您在拖动时快速或不稳定移动鼠标光标，并且鼠标光标不知何故从标题上移开（例如移到内容上），则 div 会粘住强> 到光标。

要将 div 重新固定到页面上，您可以再次快速移动光标并尝试将其返回到标题上。然后，事件似乎已重新附加，您可以将 div 放回到页面上。

总而言之，鼠标从附加了可排序事件的 div 上移开，因此该对象看不到将对象放回页面上的 mouseup 或单击事件。

不幸的是，我不知道如何解决这个问题。

编辑

我们实施了一个适合我们的解决方案，但可能并不适合每个人。当任何不应拖动的元素上发生单击事件时，只需在可拖动元素上 .trigger("mouseup") 即可。这会将可拖动元素捕捉回页面上。