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-widget-header" style="margin:0; padding:5px;">
    Drop here
  </p>
  <p:droppable onDrop="handleDrop"/>
</h:panelGroup>

<br/>

<h:panelGroup id="drag" layout="block"
  styleClass="dragDiv ui-widget-content">
  <p>Drag me to my target</p>
</h:panelGroup>
<p:draggable for="drag"/>

The client-side callback highlights the droppable h:panelGroup component and adds the text Dropped! to the paragraph tag p, when invoked.

function handleDrop(event, ui) {
  $(event.target).addClass("ui-state-highlight").
    find("p").html("Dropped!");
}

The following screenshot shows the result after dropping the draggable h:panelGroup component onto the droppable one:

The onDrop callback gets two parameters: event and ui, which are objects holding information about the drag and drop event. The droppable target is accessible by event.target. We use this fact to add the style class ui-state-highlight to the target. This class is defined by jQuery ThemeRoller.