Javascript Jquery Draggable未正确定位滚动条
我需要制作一个图像查看器，允许将大型图像加载到容器中，然后在容器中拖动，这样整个图像都可以查看，但图像永远不会被拖出边界。下面的代码工作得很好，除了滚动条没有与拖动图像的位置精确同步，并且允许图像滚动到边界之外。拖动图像时，如何使滚动条与图像同步 编辑： 这是一个有效的例子Javascript Jquery Draggable未正确定位滚动条,javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,我需要制作一个图像查看器，允许将大型图像加载到容器中，然后在容器中拖动，这样整个图像都可以查看，但图像永远不会被拖出边界。下面的代码工作得很好，除了滚动条没有与拖动图像的位置精确同步，并且允许图像滚动到边界之外。拖动图像时，如何使滚动条与图像同步 编辑： 这是一个有效的例子 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<style>
.container{margin: auto;cursor: move;width: 80%; position: relative; min-width:885px;}
#screen{overflow:auto; width: 80%; height: 600px; clear: both; border: 1px solid black; background-color: #CCCCCC; float:left; margin-right: 15px;}
</style>
</head>
<body>
<div class="container">
<div id="screen">
<img class="drag-image" id="draggable" />
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(function () {
$('#draggable').attr('src', 'http://i.imgur.com/uPjIz.jpg').load(function () {
CreateDraggablePicture();
});
});
function CreateDraggablePicture() {
var x = ($('#draggable').width() - $('#screen').width() - $('#screen').offset().left) * -1;
var y = ($('#draggable').height() - $('#screen').height() - $('#screen').offset().top) * -1;
var x2 = $('#screen').offset().left;
var y2 = $('#screen').offset().top;
$("#draggable").draggable({ containment: [x, y, x2, y2], scroll: true });
}
</script>
.container{边距：自动；光标：移动；宽度：80%；位置：相对；最小宽度：885px；}
#屏幕{溢出：自动；宽度：80%；高度：600px；清除：两个；边框：1px纯黑；背景色：#CCCCCC；浮动：左；边框右：15px；}
- （似乎是最好的）
- （但我没有找到下载链接）
- （没有看到滚动条的选项，但它是移动友好型的）
看看这是否有帮助您的脚本是否有意超出标记范围？或者这仅仅是为了描述一个外部js文件？@Eran它只是为了描述一个外部js文件谢谢，我试着在JSFIDLE（）中玩过，但也无法让它工作，但是有一个很好的插件可以很好地工作，所以我放弃了尝试找到一个只支持jqueryui的解决方案的冲动……也许我所要求的只是jquerydraggable无法实现？看起来有点奇怪，如果是这样的话，它会包含一个“滚动”选项。@Richard，如果滚动同步插件可以正确处理滚动条，JQuery不也应该正确处理它们吗？谢谢。这给了我一个选择，如果我没有得到其他答案，我将奖励给你。在这一点上，我只是好奇为什么JQuery Draggable插件没有像您提供的插件那样同步滚动条。我遵循这个问题，我将非常高兴看到一个Draggable解决方案，或者至少是一个很好的解释为什么它不起作用。您是否有修复请求？