在规模上更改可拖动的遏制

Question

我想创建一个模板编辑器，父项和子div内部（可以是a4，a5和更多其他大小）。 px = 2480 X 3508px中的实数a4，因此无法在标准屏幕上显示整个div（子）。这就是我使用比例（放大/缩小）的原因。

如果page child大于parent，我必须将其拖动才能看到 - 问题是如何在draggable上更改包含。

HTML：

<div class="bigDiv">
    <div class="smallDiv" id="draggable"></div>
</div>

JS：

var offTop = $(".bigDiv").offset().top;
var offLeft = $(".bigDiv").offset().left;
var $draggable = $("#draggable");
var $container = $(".bigDiv");
var top = offTop + $container.height() - $draggable.height();
var bottom = top + $draggable.height()  - $container.height();
var left = offLeft + $container.width() - $draggable.width();
var right = left + $draggable.width() - $container.width();
$("#draggable").draggable({ 
    containment: [left,top,right,bottom]
    //containment:'parent'
});

正如您所看到的，当前的遏制适用于较大的孩子，但如果孩子较小，则不能再拖动它并需要评论遏制。希望你明白：）

此处示例：这是fiddle。

请帮忙吗？谢谢！