Question

I have the following element in HTML:

<div class="window" iname="win0">
<div class="title" prop="title">
</div>
<div class="content" prop="form">
</div>
</div>

I want the whole element to able to be dragged, but only if they are clicking on the div element with the ‘title’ class. Basically, it is supposed to appear as a normal windows application form. I set just it as draggable but then only that element dragged instead of it and its parent (which is understandable). I’m using JQuery and The JQuery UI as well so anything utilizing those things are welcome.

Thanks if you can!

Answer 1

You can use the handle option:

$(".window").draggable({
    // your options,
    handle: ".title"
});