resizing multiple divs - dragging

[Bebeth Steudel]

I'm trying to resize multiple divs at once and having some trouble
keeping everything together.

I've got 3 divs: 2 "box" divs and a "handle" between them. The handle
is an instance of a Draggable. When creating a draggable I use the
onStart event to record the offsetLeft of the handle. Then in the
onDrag function I check the new offsetLeft to figure out how far the
hand has moved. If its gone left I shrink reduce the left box's width
and expand the right box's width.

<div id="invitations">
</div>

<div id="drag1" style="height:200px; float:left">
<img src="images/dragger.jpg" alt="dragger">
</div>

<div id="characters">

</div>

<script type="text/javascript" language="javascript">
new Draggable("drag1", { starteffect:0, revert:true,
constraint:'horizontal', onStart:function(){ startResize('drag1'); },
onDrag:function(){ performResize('drag1'); }});

startResize = function(elementName){
var element = document.getElementById(elementName);
element.startX = element.offsetLeft;
}

performResize = function(elementName){
var element = document.getElementById(elementName);
var leftElement = document.getElementById("invitations");
leftElement.style.width = parseInt(leftElement.style.width) +
element.offsetLeft - element.startX + "px";
}

</script>

Unfortunately this doesn't seem to be working. I think it has
something do with the fact that as I expand the left div's width, the
offset for the "handle" is now huge.

I'm guessing there's a really simple solution since this seems like
basic functionality, but I'm new and can't figure it out.

Thanks in advance for the help!!

[Bebeth Steudel]

Never mind....really dumb mistake. Was adding the whole movement
amount to the current width (not the original width). Sorry.