Динамическое изменение полей и размера JQuery при изменении размера браузера

Question

У меня есть перетаскиваемые div с position:absolute внутри относительного div.

<div id="parent" style="position:relative;">
  <div class="child1" style="position:absolute;margin-left:580;margin-top:109;"></div>
  <div class="child2" style="position:absolute;margin-left:300;margin-top:20;"></div>
</div>

Позиции (margin-left и margin-top) происходят из этого кода:

$('#iframe_main').contents().find('.child".$key."').draggable({ 
    containment:'#parent',
    scroll: false,
    drag: function(event) {
        o = $('#iframe_main').contents().find('.child').offset();
        p = $('#iframe_main').contents().find('#parent').offset();

        childtop = o.top - p.top;
        childleft = o.left - p.left;
        console.log(childtop + " " + childleft);
}});

Мне нужно, чтобы абсолютные div вычисляли их margin-left и margin-top динамические, а также width и height при изменении размера браузера.

Я думаю, что мне нужноделить #parent / 2?

var parentWidth  = $('#iframe_main').contents().find('#parent').width();

$(window).on('resize', function(){
$('#iframe_main').contents().find('.child').css('margin-left','parentwidth / 2');
});

Я не могу использовать css, потому что дети должны иметь position:absolute.