[jQuery] a mix of "normal" javascript and jquery?

[schnuck]

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'));
});
});
});