页面的想法是拖动,旋转和调整对象的大小。这一切都很好,但后来我遇到了一个问题,如果我将对象拖到最底部(对象包含在画布中)。它会创建一个空白,如附图所示。除底部外,其他方面没有问题。有什么建议?谢谢!
这里是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");
}
});
当对象在底部时,这是带有空格的图像
当对象位于时,这是没有空格的图像 中心或其他方面,不可滚动且没有空格