限制jQuery UI中的可拖动区域

Question

我想在div中创建一个可拖动的区域.它工作正常,但我不希望可拖动区域外的空白区域,因此想要限制可以拖动的区域.到目前为止我所得到的就是这个小提琴.

图像最初位于父div的左上角.如果将其拖动到右侧或底部,您可以看到我不喜欢的空白区域.我怎么能限制这个？

我认为可以使用jQuery UI的Draggable事件中的Containment参数来完成

$( ".selector" ).draggable({ containment: "" });

但我无法弄清楚如何.此外,如果整个页面是一个可拖动的元素(类似于谷歌地图),我该如何限制？

Answer 1

您可以通过将图像包装在容器div中来实现此目的,该容器div是图像的两倍,减去widnow div大小,并且偏移范围div的大小.那个和收容选项,你应该全部设置.

jsFiddle例子

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;
}

下图可以让您了解容器相对于图像和视口的大小.视口是图像中间较小的正方形,带有黑色边框,包装器是较大的整体矩形.您可以将图像视为移动到极限位置.