Integrating drag and drop with data iteration components

The droppable component has a special integration with the data iteration components extending javax.faces.component.UIData. Such PrimeFaces components are dataTable, dataGrid, dataList, dataScroller, carousel, and ring. The component tag p:droppable defines a data source option as an ID of the data iteration component that needs to be connected with droppable.

In this recipe, we will introduce a dataGrid component containing some imaginary documents and make these documents draggable in order to drop them onto a recycle bin. The dataGrid component will act as a data source for the droppable Recycle Bin.

How to do it…

For the purpose of better understanding the developed code, pictures come first. The first screenshot shows what happens when we start to drag a document. The Recycle Bin area gets highlighted as follows:

What it looks like after dropping three documents onto the Recycle Bin is reproduced in the following screenshot:

Available...