Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Please explain this strange behavior of jQuery draggables (in Chrome)

I am seeing strange behavior of jQuery UI draggable elements using Chrome. In the code below, I create two colored blocks, which you can drag around in the browser window. Try it here. Everything works fine using IE8 and FF3, but with Chrome two bad things happen:

  • When you click on either block, the cursor becomes an I-beam. Note there is no text on this page!
  • Put one block right on top of the other (the green one's on top). Now click on the block and drag it. The cursor turns into a no symbol, but you can still drag. Now let go. Instead of the block being dropped, it's still being dragged around even though the mouse button is now up.

This seems like way too simple of an example to break Chrome or jQuery.
Am I missing something?

<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>
like image 994
I. J. Kennedy Avatar asked Dec 22 '10 21:12

I. J. Kennedy


1 Answers

Apparently a bug in jQuery UI that was fixed in jQuery UI 1.8.6. You are using 1.7.2.

It wasn't stopping selection..

Reference posts:
http://forum.jquery.com/topic/chrome-text-select-cursor-on-drag
http://bugs.jqueryui.com/ticket/4163

One solution:

$(".ui-draggable").each(function() {
  this.onselectstart = function() { return false; };
});
like image 178
simshaun Avatar answered Nov 06 '22 21:11

simshaun