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

时间:2017-01-26 10:05:36

标签: javascript jquery-ui draggable

我想创建一个模板编辑器,父项和子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

请帮忙吗?谢谢!

0 个答案:

没有答案