Making a component draggable

Any component can be enhanced with draggable behavior. To enable draggable functionality on any PrimeFaces component, we always need a component called Draggable.

In this recipe, we will see how to make a component draggable and learn some basic features of Draggable. To demonstrate these features, we will make several p:panel components draggable.

How to do it...

A component can be made draggable by using p:draggable. The component ID must match the for attribute of the p:draggable component. If the for attribute is omitted, the parent component will be selected as a draggable target. Let's make some panel components draggable and apply some basic features:

<p:panel id="pnl" header="Draggable panel with default settings">
    <h:outputText value="Drag me around"/>
</p:panel>
<p:draggable for="pnl"/>

<p:panel id="hpnl" header="Draggable panel by handle">
    <h:outputText value="I can be only dragged by my header"/>
</p:panel...