jQuery 可拖动的全屏图像

Question

我正在使用jQuery Draggable，图像大于屏幕(3000x3000(。

为了防止图像被拖出屏幕，我正在观察图像位置

#screen {
cursor: grab;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="screen">
<img src="images/big-image.jpg" class="drag-image" id="draggable" />
</div>
$("#draggable").draggable({
drag: function (event, ui) {
if (ui.position.top > 1032) {
ui.position.top = 1032;
} else if (ui.position.top < -1030) {
ui.position.top = -1030;
}
if (ui.position.left > 540) {
ui.position.left = 540;
} else if (ui.position.left < -540) {
ui.position.left = -540;
}
}
});

如何防止图像被拖出屏幕而不必对位置值进行硬编码？

Answer 1

在这篇文章的帮助下，jQuery 元素相对于视口的偏移量，我通过获取图像偏移量，然后使用它们来防止图像拖出屏幕来解决这个问题：

var offset = $('#screen img').offset();
var xPos = offset.left - $(document).scrollLeft()
var yPos = offset.top - $(document).scrollTop()
$("#draggable").draggable({
drag: function (event, ui) {
if (ui.position.top > Math.abs(yPos)) {
ui.position.top = Math.abs(yPos);
} else if (ui.position.top < yPos) {
ui.position.top = yPos;
}
if (ui.position.left > Math.abs(xPos)) {
ui.position.left = Math.abs(xPos);
} else if (ui.position.left < xPos) {
ui.position.left = xPos;
}
}
});

Answer 2

在可拖动的 jquery-ui https://api.jqueryui.com/draggable/#option-containment 中有包含选项。

将拖动限制在指定元素或区域的边界内。

哪个接受

• "家长">
• "文档">
• "窗口">
• j查询选择器

>$("#draggable").draggable({ containment: 'window' });