Defining droppable targets

Any component can be enhanced with a droppable behaviour. Droppable components are targets for draggable ones. To enable droppable functionality on any PrimeFaces component, we always need a component called Droppable.

In this recipe, we will see how to define droppable targets and learn a client-side callback onDrop.

How to do it...

A component can be made droppable by using p:droppable. The component ID must match the for attribute of p:droppable. If the for attribute is omitted, the parent component will be selected as a droppable target. We will take two h:panelGroup components and make them droppable and draggable respectively. In addition, we will define a client-side callback that gets invoked when a draggable component is dropped. This can be accomplished by the onDrop attribute, which points to a JavaScript function.

<h:panelGroup id="drop" layout="block" styleClass="ui-widget-content"
              style="height:150px;width:300px;">
    <p class...