Defining droppable targets

Any component can be enhanced with the droppable behavior. Droppable components are targets for draggable ones. To enable the 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 will 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="ui...