jQuery UI draggable - drag parent

Drag parent element by click/drag only on child element (e.g. move entire dialog by dragging title bar)

by Raul Corona Xolaltenco

HTML

<div id="dlg">
    <div id="title">Here is the title</div>
    <div id="msg">
        <p>Just like any Windows dialog box, drag the dialog by its title bar.</p>
        <p>
            Something: <input type="text" /><br />
            SumpnElse: <input type="text" />
        </p>
        <p><input type="button" value="Submit" /></p>
    </div><!-- #msg -->
</div><!-- #dlg -->

CSS

*{position:relative;font-family:"Segoe UI";}
div:not(#dlg){padding:5px 7px;}
#dlg{height:220px;width:300px;margin:20px;border:1px solid grey;}
#title{height:20px;text-align:center;background:darkcyan;color:white;}
#title{cursor:move;}
input[type='button']{position:absolute;bottom:5px;right:30px;}
input:nth-child(1){margin-bottom:5px;}
p:nth-child(3){height:30px;}

JavaScript

/*
http://stackoverflow.com/questions/11713183/jquery-ui-draggable-drag-parent-div
*/


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