Menu
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>
994
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; };
});If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
