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

Question

I am developing a project using primefaces.
In that, I used one p:panel(in user.xhtml page) inside the p:dialog and I set showHeader="false" to the p:dialog.
For that, I need to drag the p:dialog when I click and drag on the p:panel, which is included inside the 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?

Answer 1

Use the draggable component on a panel instead of a dialog
<p:panel id="pnl" header="UserPanel">
<ui:include src="${model.dynamicPage}"/>
</p:panel>
<p:draggable for="pnl" />
and define the panel dimensions with some css:
.ui-panel {
margin: 15px;
height: 200px;
width: 300px;
}
Edit: if there are several components in your model.dynamicPage facelet but you want the panel to be the only allowed to handle the dragging of the whole container, add a css class to it and restrict the draggable component handling with this 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>