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.j开发者_Go百科s"></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>
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; };
});
加载中,请稍侯......
精彩评论