JQuery-UI Draggable 锁定到窗口答案

【问题标题】：JQuery-UI Draggable locked to the windowJQuery-UI Draggable 锁定到窗口
【发布时间】：2012-04-19 14:16:09
【问题描述】：

我创建了一个非常简单的地图，我希望它是可拖动的。

它有效，我可以随意移动地图。但是我希望它被锁定在“窗口”上，这样它被拖动时就不会出现空白，我希望你明白我的意思。我还查看了 jquery-ui 的概述，但没有找到我需要的任何内容。

【问题讨论】：

标签： javascript jquery html jquery-ui draggable

【解决方案1】：

您需要将运动限制在一组坐标上才能使其正常工作。有点搞砸了，但是包含根据元素的左上角来约束元素。

$(function() {
    var con = $('#container');
    var cw = con.width( ), ch = con.height( );
    var map = $('#map');
    var mw = map.width( ), mh = map.height( );
    var x1 = -mw + cw, y1 = -mh + ch;
    map.draggable({containment:[x1,y1,0,0]});
});

【讨论】：

这对我不起作用。 #container 是否需要一些 CSS？ con.width() 和 con.height() 为我产生 null。

【解决方案2】：

查看http://jqueryui.com/demos/draggable/#constrain-movement 这应该可以解决问题

【讨论】：

嘿，感谢您的重播。我已经尝试过了，但后来它“错误”，可能是因为溢出：隐藏？
啊是的，我可以在 jsfiddle 上看到它，对我来说似乎很奇怪。我将尝试为您构建一个示例。同时，请看一下 wijmo superpanel，这是一种略有不同的方法，实际上并没有做同样的事情，但也可能适合您（只是一个建议，而不是解决方案；））。
是的，当然它不会工作，愚蠢的我 :) 它不起作用，因为可拖动元素比容器大，所以你看到的实际上不是“错误”，但它会卡在一边您正在拖动到...我认为您将必须计算可以拖动的坐标，即。左上角是x=mapWidth-viewportwidth 或类似的东西。很抱歉一开始就误导了你；）

【解决方案3】：

有一个简单的方法来做到这一点（如果我理解得很好）：

$('#map').draggable({
    containment: 'window',
    scroll: false
});

【讨论】：