请解释jQuery draggables的这种奇怪行为(在Chrome中)

Question

请解释jQuery draggables的这种奇怪行为(在Chrome中)

I. *_*edy 5 jquery drag-and-drop google-chrome jquery-ui

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

单击任一块时,光标变为工字梁.请注意,此页面上没有文字!
将一个块放在另一个块的顶部(绿色的块在顶部).现在单击该块并拖动它.光标变为无符号,但您仍然可以拖动.现在放手吧. 即使鼠标按钮现在已经启动,它仍然被拖动,而不是被丢弃的块.

这似乎是这样过于简单的例子,打破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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

sim*_*aun 7

显然是在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; };
});

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，8 月前
查看次数：	3031 次
最近记录：	14 年，8 月前