jQuery UI, draggable child div larger than parent

开发者_JS百科

I have looked over several articles and tried all of the methods proposed and found no solutions as of yet.

I am attempting to create a map that is draggable, but will stop when it its own edge meets the edge of the parent's edge. The child is larger than the parent so I have tried all different types of methods to resolve this but have yet to find a solution.

The example below shows an example in which the black border should not have any white space within. I have tried containment in several different flavors but haven't figured out the math for it.

Example: http://jsfiddle.net/LQtCY/3/

Thanks

---

Have u tried this?

var parentPos = $('.mapshell').offset();
var childPos = $('.mapcontent_1').offset();

$(".mapcontent_1").draggable({
    drag: function(event, ui) {
        if (ui.position.top > parentPos.top) {
            ui.position.top = parentPos.top;
        }
        if (ui.position.left > parentPos.left) {
            ui.position.left = parentPos.left;
        }
    },

    scroll: false
});

http://jsfiddle.net/LQtCY/6/