Drag div by handle that is not nested

Question

In the JQueryUI draggable demo, I can see you can attach a handle to a DIV but if the handle is not nested within the parent DIV that is draggable, it doesn\'t work e.g.

Answer 1

One possible solution could be to have the handle inside, but use css to position it outside.

Javascript:

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

HTML:

 <div id="draggable">draggable
<div id="handle">handle</div>
 </div>

CSS:

#draggable{
display: block; 
height: 300px; 
width: 600px; 
background-color: gray;
}
#handle{
display: block; 
height: 50px; 
width: 600px; 
background-color: green;
position: relative;
top: -30px;
}

Otherwise, you might have to do something similar to a multiselect draggable. How do I drag multiple elements at once with JavaScript or jQuery?