How can I make the inner div trigger the drag effect on the outer div using jQuery?

Question

I want to use the inner div to drag the outer div, for example:

<div id="outerDiv" style="height:300px; width:200px;"> <div id="innerDiv" style="height:10px; width:200px;"></div> </div> 

If this is my code, assuming jQuery plugins are connected using draggable etc. How can I do this so that when the user clicks and drags the innerDiv, he drags the entire externalDIV. But so that when the user clicks and tries to drag the external div, it does not work.

Basically, I want innerDiv to control the draggability of outerDiv.

Any ideas?

Thanks,
Matt

Answer 1

You should take a look at the handle property of the draggable . Something like this (untested):

 $("#outerDiv").draggable({ handle: "innerDiv" });