Question

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

当您点击任一块时，光标变成工字梁。请注意那里此页面上没有文字！
将一个街区放在上方其他（绿色的在上面）。现在单击块并拖动它。该光标变成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>

Answer 1

显然是在jQuery UI 1.8.6中修复的jQuery UI中的错误。您正在使用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 draggables的这种奇怪行为（在Chrome中）

1 个答案: