How can I make an inner div trigger a drag effect on an outer div using Jquery?

Question

I want to use an inner div to drag around an 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 the proper JQuery plugins are attached to use draggable, etc... How can I make it so that when the user clicks and drags the innerDiv, it drags the entire outerDiv. But so that when the user clicks and tries to drag the outerDiv, it doesn't work.

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

Any Ideas?

Thanks,
Matt

Answer 1

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

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