Jquery UI 可拖动在屏幕底部创建一个空白

Question

页面的想法是拖动、旋转和调整对象的大小。这一切都很好，但后来我遇到了一个问题，如果我将对象拖到最底部（对象包含在画布中）。它创建一个空白，如所附照片所示。除了底部之外，其他方面都没有问题。有什么建议？谢谢！

这里是jquery draggable的初始化：

$(".object-clone.object-valves,.object-clone.object-pumps").draggable({
    containment: "#canvas-repository",
    stack: ".object-clone",
    cursor: "move",
    start: function (event, ui) {
        $globalSaveState = false;
        if ($globalResizeMode) {
            $(ui.helper).css('z-index', '1010');
        }
    },
    stop: function (event, ui) {
        var $objectPosition = ui.helper.offset();
        var $dblPositionX = $objectPosition.left;
        var $dblPositionY = $objectPosition.top;
        var $canvasPosition = $("#canvas-repository").offset();
        var $dblCanvasPositionY = $canvasPosition.top;
        var $intObjectCount = $(ui.helper).data('item');
        var $dblCanvasWidth = $('#canvas-repository').width();
        var $dblCanvasHeight = $('#canvas-repository').height();
        var $dblObjectCloneSize = $dblCanvasWidth * $dblArea;
        var $dblArea = $(ui.helper).attr('data-area');
        $dblPositionY = $dblPositionY - $dblCanvasPositionY;
        var $percentagePositionX = ($dblPositionX) / $dblCanvasWidth;
        var $percentagePositionY = ($dblPositionY) / $dblCanvasHeight;
        var $roundedPercentagePositionX = Math.round($percentagePositionX * 100) / 100;
        var $roundedPercentagePositionY = Math.round($percentagePositionY * 100) / 100;
        $(ui.helper).attr("data-vertical", $roundedPercentagePositionX).attr("data-horizontal", $roundedPercentagePositionY).css('width', $dblObjectCloneSize).css('height', $dblObjectCloneSize).css('left', ($roundedPercentagePositionX * 100) + "%").css('top', ($roundedPercentagePositionY * 100) + "vh");
    }
});

这是带有空白的图像，当对象位于底部时

这是没有空格的图像，当对象位于 中心或其他边，不可滚动且没有空格

Answer 1

我想通了！毕竟这只是愚蠢。正是因为旋转使得图像超出了容器。关门了！