Resizeable Div

with draggable handle

[stuckinbed]

This is my first javascript project and I just need some direction on what step to take next :-)

I have two divs that are both draggable (through some code that I downloaded and customized). I want the smaller one that is positioned in the bottom right of the large div ('br') to resize the large one ('main').

Right now it is pseudo-working, but I have no idea how to FORCE the smaller div ('br') to move to the bottom right corner of the bigger div whenever the bigger div is moved (including the actual *act* of moving)

Here is the code I have so far...

<script language="JavaScript" type="text/javascript">
Drag.init(document.getElementById("br"), 'br');
Drag.init(document.getElementById("main"));
// this is the code that links to the method that makes both divs draggable

var br = document.getElementById("br");
var main = document.getElementById("main");

function moveToCorners () {

br.style.left = parseInt(main.style.left) + parseInt(main.style.width) + 'px';
br.style.top = parseInt(main.style.top) + parseInt(main.style.height) + 'px';
}

function expand() {
main.style.width = parseInt(br.style.left) + 'px';
main.style.height = parseInt(br.style.top) + 'px';

}

document.addEventListener('mousemove', expand, false);
main.addEventListener('mousemove', moveToCorners, false);
</script>

I realize that the code would have to be adjusted to work cross-browser. Just looking for some direction! Thanks!

[whoisgregg]

Do you want there to be a div that is moved by moving a different div? For example, the window is split down the middle. On the left side is a red square, on the right a blue square. To move the red square, the user clicks and drags the red square. Like that or something else?

A little bit more information and someone may be able to help. :)

[stuckinbed]

Sorry about being so vague... here are the specifics...

I have placed the following event listener on the document: document.addEventListener('mousemove', expand, false);

The thing is, I do NOT want this EventListener to be active whenever a certain function is called with a separate 'mousedown' event listener.

In other words, whenever the mousedown listener is active, I want it to disable the mousemove listener

Is this possible?

Thanks!