Jquery UI draggableは画面の下部に空白を作成します

このページのアイデアは、オブジェクトをドラッグ、回転、サイズ変更することです。それはすべて正常に動作しますが、オブジェクトを最も下の部分（オブジェクトはキャンバスに含まれています）にドラッグすると問題が発生しました。添付されている写真のように空白が作成されます。それは底を除いて他の側に問題がない。助言がありますか？ありがとう！オブジェクトは、ここで底Jquery UI 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"); 
    } 
});

ここ