CODEWITHSUNDEEP
jqueryjquery-uigoogle-chromedrag-and-drop
I. J. Kennedy
I. J. Kennedy

Reputation: 25819

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:

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>

Upvotes: 5

Views: 3084

Answers (1)

simshaun
simshaun

Reputation: 21466

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; };
});

Upvotes: 7

Related Questions