Draggable
Metro UI CSS provides simple method for creating draggable elements with data-role draggable .
Simple draggable
Area draggable
<div data-role="draggable"></div>
<div id="area1">
<div data-role="draggable" data-drag-area="#area1"></div>
</div>
Draggable panel
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
Draggable panel on heading
Panel Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus lectus sit amet odio ullamcorper malesuada dignissim justo gravida.
<!--Draggable panel-->
<div class="panel" data-role="draggable">
<div class="heading">
<span class="icon mif-home"></span>
<span class="title">Panel Title</span>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
<!--Draggable panel on heading-->
<div class="panel" data-role="draggable" data-drag-element=".heading">
<div class="heading">
<span class="icon mif-home"></span>
<span class="title">Panel Title</span>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Simple dialog
Dialog :: Metro UI CSS - The front-end framework for developing projects on the web in Windows Metro Style
Draggable dialog
<div data-role="dialog,draggable" class="dialog" data-close-button="true">
<h1>Simple dialog</h1>
<p>
Dialog :: Metro UI CSS - The front-end framework for
developing projects on the web in Windows Metro Style
</p>
</div>