Drag the div size contained in another, with padding

Question

I am trying to resize the div just like here in the stackoverflow editor (at the bottom of the editor).

Everything works fine until I put my div in another div with padding.

contained in div:

contained in div

I use this to drag a div. Please note that it works as long as I have no padding in my main div.

$('#drag').mousedown(function(e){
    $(document).mousemove(function(e){
         $('#iframeEditorContainer').css("height",e.pageY);
    })
});
$(document).mouseup(function(e){
    $(document).unbind('mousemove');
});

and then I made it work by changing the line in js: it works

$('#iframeEditorContainer').css("height",e.pageY-80);

I did from -80 to Y to withstand filling. The problem is that I do not trust this -80, I did it through a trial version and an error, and if something changes on my page, I am afraid that it will damage the dragoons. Is there a better way to do this?

Answer 1

http://jsfiddle.net/fcoerd0t/3/

div.

$('#drag').mousedown(function(e){
    var top = $('#iframeEditorContainer').offset().top;
    $(document).mousemove(function(e){
         $('#iframeEditorContainer').css("height",e.pageY-top);
        e.preventDefault();
    })
});

, #iframeEditorContainer