我的 HTML 文档中有两个不同的 div 容器,一个包含 jquery-ui draggables 和另一个 droppables。我现在希望能够将可拖动对象拖到可放置对象上,并使用 jquery .offset() 将其直接放置在其上方。此外,如果没有击中 droppable,则可拖动的快照会恢复到其原始位置。
这在 IE 和 Firefox 中运行良好,但是当缩放级别不是 100% 时,WebKit 浏览器(Chrome、Safari)似乎存在问题。对于缩放级别 110%,使用 .offset() 的定位似乎偏离了大约 10%,误差随着缩放级别的增加而增加。
这是我的问题的Java脚本代码。Draggable 和 droppable 只是普通的 div 元素。
<!DOCTYPE html>
<html>
<head>
<title>Jquery offset example - WebKit browser</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
var droppable = $("#droppable");
var draggable = $("#draggable");
draggable.data("offset", draggable.offset());
var hit = false;
draggable.draggable({
drag: function(){
hit = false;
},
stop: function(){
if(!hit) {
$(this).offset($(this).data("offset"));
}
}
});
droppable.droppable({
drop: function(e, ui){
ui.draggable.offset($(this).offset());
hit = true;
}
});
});
</script>
</head>
<body>
<div id="text" style="margin-bottom:20px">
<div id="droppable"style="width:30px; height:20px; border-style:solid; border-width:1px; background-color:#FFFFFF"></div>
</div>
<div id="draggables">
<div id="draggable" style="width:30px; height:20px; position:relaive; border-style: solid; border-width: 1px; background-color:#FFFFFF">gap</div>
</div>
</body>
我正在使用 jquery 版本 1.9.1 和 jquery-ui 版本 1.10.2 以及 Google Chrome 版本 25.0.1364.172。
有没有人有解决这个问题的方法?