限制jQuery UI中的可拖动区域 [英] Restricting the draggable area in jQuery UI

问题描述

我正在尝试在div中创建可拖动区域.它工作正常，但我不希望可拖动区域外的空白，因此希望限制可拖动区域.到目前为止，我的想法是在此小提琴中.

I am trying to create a draggable area within a div. It works fine but I do not want the white space outside the draggable area and hence want to limit the area that can be dragged. What I have come up so far is here in this fiddle.

图像最初位于父div的左上角.如果将其拖动到右侧或底部，您会看到空白，这是我不希望的.我该如何限制呢?

The image is initially positioned to the top-left of the parent div. If you drag it to the right or bottom, you can see the white space, which I wouldn't prefer. How can I restrict this?

我认为可以使用

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

但是我不知道怎么做.另外，如果整个页面是一个可拖动元素(类似于Google Maps)，该如何限制呢?

But I am not able to figure out how. Also, if the whole page was a single draggable element (something similar to Google Maps), how can I limit that?

推荐答案

您可以通过将图像包装在容器div中来实现此目的，该容器div是图像的两倍，减去widnow div大小，然后偏移范围div.那和遏制选项，您应该都准备好了.

You can do this by wrapping the image in a container div that's twice as large as the image, minus the widnow div size, and offset by the size of the range div. That and the containment option and you should be all set.

jsFiddle示例

jsFiddle example

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

下面的图像应使您了解容器相对于图像和视口的大小.视口是图像中间带有黑色边框的较小正方形，而包装器是较大的整体矩形.您可以看到图像被移到了极限位置.

The image below should give you an idea as to the size of the container relative to the image and the viewport. The viewport is the smaller square in the middle of the image with a black border and the wrapper is the larger overall rectangle. You can see the image as being moved to the extreme positions.

这篇关于限制jQuery UI中的可拖动区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！