<style type="text/css">
			.ui-panel {
				margin: 15px;
				width: 300px;
			}
		</style>


<p:panel id="pnl" header="Draggable Panel">
    <h:outputText value="I am actually a regular p:panel." />
</p:panel>
<p:draggable for="pnl" />

<p:panel id="handlepnl" header="Handle">
    <h:outputText value="I can only be dragged with my header." />
</p:panel>
<p:draggable for="handlepnl" handle=".ui-panel-titlebar" />

<p:panel id="hpnl" header="Horizontal Only">
    <h:outputText value="I can only be dragged horizontally." />
</p:panel>
<p:draggable for="hpnl" axis="x" />

<p:panel id="vpnl" header="Vertical Only">
    <h:outputText value="I can only be dragged vertically" />
</p:panel>
<p:draggable for="vpnl" axis="y" />

<p:panel id="rpnl" header="Revert">
    <h:outputText value="I will be reverted back to my original position" />
</p:panel>
<p:draggable for="rpnl" revert="true" />

<p:panel id="opnl" header="Opacity">
    <h:outputText value="My opacity is lower when I'm being dragged" />
</p:panel>
<p:draggable for="opnl" opacity="0.3" />

<p:panel id="gpnl" header="Grid">
    <h:outputText value="I am dragged in grid mode" />
</p:panel>
<p:draggable for="gpnl" grid="20,40" />

<p:outputPanel id="restrictPanel" layout="block" style="width:400px;height:200px;border:1px solid #666666;margin-bottom:20px">
    <p:panel id="conpnl" header="Restricted">
        <h:outputText value="I am restricted to my parent's boundaries" />
    </p:panel>
</p:outputPanel>
<p:draggable for="conpnl" containment="parent" />

<p:graphicImage id="pic" name="demo/images/nature/nature10.jpg" />
<p:draggable for="pic" />