JQuery-UI Draggable鎖定到窗口

Question

我創建了一個非常簡單的地圖，並且希望它可以拖動。

這是代碼： http : //jsfiddle.net/AeABp/

它可以工作，我可以根據需要移動地圖。 但是我希望將其鎖定在“窗口”上，以便在拖動時永遠不會有空格，希望您理解我的意思。 我也查看了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]});
});

Answer 2

查看http://jqueryui.com/demos/draggable/#constrain-movement這應該可以解決問題

Answer 3

有一個簡單的方法可以做到（如果我理解的很好）：

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