Have you tried JQuery UI draggable, it has a parent (actually called
containment) parameter which works fine for my project... You should
be able to get to work with this code (not tested):
$('#box').draggable( {
containment: '#main' // it's also possible to specify 'parent' or
any DOM Element
});
http://docs.jquery.com/UI/Draggables
// Carl-Fredrik
On Feb 17, 11:38 am, schnuck <[EMAIL PROTECTED]> wrote:
> hi again,
>
> i have the following code below which in fact works fine. what it does
> is it limits a small div to be only draggable within another fixed
> sized div. e.g. you can't drag the div out of the bigger div - it
> stops at its borders and acts like a "prison".
>
> however, to me it looks like a mix of "normal" javascript and jquery
> syntax.
> is it, e.g. possible to to with this line:
>
> var prison_left = document.getElementById('main').offsetLeft;
>
> this:
>
> var prison_left = $('main').offsetLeft;
>
> at all? i have tried it but it doesn't work. the goal would be the
> make the code compacter, in a good jquery way.
>
> any help very appreciated.
>
> $(document).ready(function(){
> function checkLimits(box){
> var prison_left = document.getElementById('main').offsetLeft;
> var prison_right = prison_left +
> document.getElementById('main').offsetWidth;
> var prison_top = document.getElementById('main').offsetTop;
> var prison_bottom = prison_top +
> document.getElementById('main').offsetHeight;
> var box_left = parseInt(box.css('left'));
> var box_right = box_left + parseInt(box.css('width'));
> var box_top = parseInt(box.css('top'));
> var box_bottom = box_top + parseInt(box.css('height'));
> if(box_left < prison_left){
> box.css('left', prison_left);}
>
> if(box_top < prison_top){
> box.css('top', prison_top);}
>
> if(box_right > prison_right){
> box.css('left', prison_right - parseInt(box.css('width')));}
>
> if(box_bottom > prison_bottom){
> box.css('top', prison_bottom - parseInt(box.css('height')));}
> }
>
> $(function(){
> $('#box').easydrag();
> $('#box').ondrag(function(e){
> checkLimits($('#box'));
>
> });
> });
> });
