JQuery-UIドラッグ可能なウィンドウがロックされています

Question

私は本当にシンプルなマップを作成しました。ドラッグ可能にしたいと思っていました。ここで

コードです： http://jsfiddle.net/AeABp/

それは動作しますが、私は私が望むどのように周辺の地図を移動することができます。しかし、私はそれがドラッグされたときに空白がないように、それが "窓"にロックされたいので、私はあなたが私の意味を理解することを願っています。 jquery-uiの概要も見ましたが、必要なものは見つかりませんでした。

Answer 1

を行う必要がありhttp://jqueryui.com/demos/draggable/#constrain-movementをチェックしてください。ちょっと混乱しましたが、封じ込めは要素の左上隅に基づいて要素を制約します。

$(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

が、これはあなたがそれを正しく動作させるために座標のセットへの移動を制限する必要がありますトリック

Answer 3

（私はよく理解されている場合）、それを行うための簡単な方法があります：あなたの再生のため

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