Any component can be enhanced with the draggable behavior. To enable the 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.
A component can be made draggable by using p:draggable. The value of the for attribute specifies a search expression for the draggable target. In our case, it matches the ID of p:panel.
Tip
Chapter 1, Getting Started with PrimeFaces, provides more details on search expressions.
If the for attribute is omitted, the parent component will be selected as a draggable target. Let us make some panel components draggable and apply some basic features:
<p:panel id="pnl" header="Draggable panel with default settings"> Drag me around </p:panel> <p:draggable for="pnl"/> <p:panel id="hpnl...