当jQuery显示边缘时停止拖动 [英] Stop dragging when edges show with jQuery

问题描述

以下是指向该站点的链接：War game map

我在一个较小的div中有一个较大的jQuery可拖动div(将地图图像设置为背景)，该div上有overflow：隐藏。关键是让用户像在maps.google.com上一样拖动地图。

虽然Google Maps有一个水平循环的地图，但我的地图在太平洋的两边都停了下来。就像现在一样，用户可以将地图拖到两侧太远，这样红色背景就会开始显示在左侧或右侧。

如何使用jQuery在开始显示红色背景之前停止拖动地图的边缘？

(我知道地图现在难看得要死，但它正在建设中。)

css：

body {

overflow:hidden;
background-color: #ff0000;

}

#theBody {

position: absolute;
top: 50px;
left: 0px;
width: 1px;
height: 1px;
overflow: hidden;

}

#draggable {

background-image: url(map.gif);
width: 3944px;
height: 2258px;

}

jQuery：

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

viewportHeight = (viewportHeight - 50);

$('#theBody').css({'width': viewportWidth});
$('#theBody').css({'height': viewportHeight});

$('#draggable').draggable();

HTML

<div id="theBody">

    <div id="draggable" class="ui-widget-content"></div>

</div>

推荐答案

jQuery-UI的draggable功能提供了定义容器的可能性，这将限制被拖动项的移动。 通过在初始化Draggable时设置containment参数，您将达到预期的目标。 在您的情况下，您应该使用

$('#draggable').draggable({containment:"#theBody"});

您可以找到更多详细信息here。

为了使可拖动对象大于封闭区域，您可以使用以下技巧：

1. 使用overflow:hidden创建容器所需的viewContainerdiv(例如300x300)
2. 在此div后面追加一个draggableContainer，这将是可拖动意义上的实际容器。第二个div必须足够大，才能容纳您的可拖动对象。
3. 追加到这个draggableContainer拖拽对象draggable，比方说500x500
4. 根据另外两个的大小调整draggableContainer的大小和位置。在这种情况下，为了允许对整个draggable进行平移，需要使用-200x-200偏移700x700

您可以看到complete working example here。

这篇关于当jQuery显示边缘时停止拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！