我发现使用 Chrome 的 jQuery UI 可拖动元素有奇怪的行为。在下面的代码中，我创建了两个彩色 block ，您可以在浏览器窗口中拖动它们。试试吧here 。使用 IE8 和 FF3 一切正常，但使用 Chrome 会发生两件坏事:
- 当您单击任一 block 时， 光标变成工字梁。注意那里 此页没有文字!
- 将一个方 block 放在 其他(绿色的在上面)。现在 单击该 block 并拖动它。这 光标变成no symbol , 但您仍然可以拖动。现在放手吧。 方 block 没有被丢弃， 甚至还被拖来拖去 尽管鼠标按钮现在已抬起。
这看起来方式太简单了，无法破坏 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>
最佳答案
显然是 jQuery UI 中的一个错误，已在 jQuery UI 1.8.6 中修复。您正在使用 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; };
});关于jquery - 请解释 jQuery 拖动的这种奇怪行为(在 Chrome 中)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4513678/