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.
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...