JQuery-UI Draggable locked to the window

Question

I created a really simple map and I wanted it to be dragable.

Here is the code: http://jsfiddle.net/AeABp/

It works, I can move the map around how I want. But I want it to be locked to the "window", so that there is never white space when it get dragged, I hope you understand what I mean. I also had a look at the the overview from jquery-ui, but didn't find anything that I needed.

Answer 1

You need to constrain movement to a set of coordinates to make it work properly. Took a bit of messing with, but the containment constrains the element based on the top left corner of the element.

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

There's an easy way to do it (if i understood well):

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