jquery - 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;
        }

    }
});

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

标签： jqueryjquery-uidraggable

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;
        }

    }
});