jsf - How to drag the p:dialog without use showHeader="true" in primefaces? -

i developing project using primefaces.

in that, used 1 p:panel(in user.xhtml page) inside p:dialog , set showheader="false" p:dialog.

for that, need drag p:dialog when click , drag on p:panel, included inside p:dialog.

sample code:

<p:dialog showheader="false">             <ui:include src="${model.dynamicpage}"/>       </p:dialog> 

user.xhtml

<h:form id="userform">    <p:panel header="userpanel">      .......    </p:panel> </h:form> 

any idea?

use draggable component on panel instead of dialog

<p:panel id="pnl" header="userpanel">            <ui:include src="${model.dynamicpage}"/>      </p:panel> <p:draggable for="pnl" /> 

and define panel dimensions css:

.ui-panel {     margin: 15px;     height: 200px;     width: 300px; } 

edit: if there several components in model.dynamicpage facelet want panel allowed handle dragging of whole container, add css class , restrict draggable component handling class:

eg.

<p:panel id="pnl" showheader="false">            <ui:include src="${model.dynamicpage}"/>      </p:panel> <p:draggable for="pnl" handle=".my-handle-classname" /> 

and

<h:form id="userform">    <p:panel header="userpanel" styleclass="my-handle-classname">      .......    </p:panel> </h:form>