javascript - JQuery-UI Draggable 锁定到窗口

Question

我创建了一个非常简单的 map ，我希望它可以拖动。

代码如下: http://jsfiddle.net/AeABp/

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

Answer 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]});
});