我正在尝试在 div 内创建一个可拖动区域。它工作正常,但我不想要可拖动区域之外的空白区域,因此想要限制可以拖动的区域。到目前为止我想到的是在这个小提琴里。 http://jsfiddle.net/kBVFC/
图像最初位于父 div 的左上角。如果将其拖动到右侧或底部,您可以看到空白,这是我不喜欢的。我怎样才能限制这个?
我认为可以使用 jQuery UI 的 Draggable 事件中的 Containment 参数来完成
$( ".selector" ).draggable({ containment: "" });
但我无法弄清楚如何。另外,如果整个页面是一个可拖动元素(类似于 Google 地图),我该如何限制它?
您可以通过将图像包装在容器 div 中来实现此目的,该容器 div 的大小是图像的两倍,减去 widnow div 大小,并偏移范围 div 的大小。那和收容选项你应该都准备好了。
jsFiddle 示例 http://jsfiddle.net/j08691/kBVFC/5/
HTML
<div id="range">
<div id="container">
<img src="http://www.hdwallpapers.in/walls/enchanted_forest-wide.jpg" id="map" />
</div>
</div>
JS
jQuery("#map").draggable({
containment: $('#container')
});
CSS
#range {
width:400px;
height:400px;
overflow:hidden;
border:1px solid black;
position:relative;
}
#container {
position:absolute;
top:-800px;
left:-1520px;
width: 3440px;
height: 2000px;
}
#map {
width: 1920px;
height: 1200px;
top:800px;
left:1520px;
}
下图应该可以让您了解容器相对于图像和视口的大小。视口是图像中间带有黑色边框的较小正方形,而包装器是较大的整体矩形。您可以看到图像被移动到极限位置。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)