请解释 jQuery 可拖动对象的这种奇怪行为（在 Chrome 中）答案

【问题标题】：Please explain this strange behavior of jQuery draggables (in Chrome)请解释 jQuery 可拖动对象的这种奇怪行为（在 Chrome 中）
【发布时间】：2010-12-22 21:01:44
【问题描述】：

我看到使用 Chrome 的 jQuery UI 可拖动元素的奇怪行为。在下面的代码中，我创建了两个彩色块，您可以在浏览器窗口中拖动它们。试试看here。使用 IE8 和 FF3 一切正常，但使用 Chrome 会发生两件坏事：

当您单击任一块时，光标变为 I 型梁。注意那里此页面上没有文字！
在顶部放置一个方块其他（绿色的在上面）。现在单击块并拖动它。这光标变成no symbol，但你仍然可以拖动。现在放手。 而不是被丢弃的块，它仍然被拖着走虽然鼠标按钮现在已启动。

这似乎是一个方式太简单的例子，无法破坏 Chrome 或 jQuery。
我错过了什么吗？

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

    <script>
        $(function() {
            $('<div>').addClass(  'redsquare').appendTo('body').draggable({ grid: [24, 24] })
            $('<div>').addClass('greensquare').appendTo('body').draggable({ grid: [24, 24] })
        });
    </script>

    <style>
        body {
            margin: 0 0 0 0;
        }

        .redsquare {
            position: absolute;  
            top: 48; left: 48;          
            width: 24px;
            height: 24px;
            background-color: Red;
        }            

        .greensquare {
            position: absolute;  
            top: 48; left: 96;          
            width: 24px;
            height: 24px;
            background-color: Green;
        }            
    </style>

</head>
<body>
</body>
</html>

【问题讨论】：

标签： jquery jquery-ui google-chrome drag-and-drop

【解决方案1】：

显然 jQuery UI 中的一个错误已在 jQuery UI 1.8.6 中修复。您使用的是 1.7.2。

它并没有停止选择..

参考帖：
http://forum.jquery.com/topic/chrome-text-select-cursor-on-drag
http://bugs.jqueryui.com/ticket/4163

一种解决方案：

$(".ui-draggable").each(function() {
  this.onselectstart = function() { return false; };
});

【讨论】：

虽然链接只解决了较小的文本光标问题，但更新到 jQuery UI 1.8.6 解决了这两个问题。谢谢！
我认为这两个问题都是由选择事件引起的。当您单击一个块时，它认为您正在选择某些东西（因此它显示 I 型光标）。当一个块在另一个块之上并且您尝试拖动时，它仍然认为您正在尝试选择某些东西。出于某种原因，我认为它没有停止选择事件，这就是为什么即使你放手它仍然跟随光标。很高兴升级修复了它！
+1 表示在bugs.jqueryui.com/ticket/4163 上提出的解决方案。如果你把 document.onselectstart = function(){ return false; };在可拖动的“开始”方法中，然后是 document.onselectstart = function(){};在“停止”方法中，它修复了当 chrome 在拖动时选择任何地方的任何内容。