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
, Carousel
, Galleria
, Ring
, and Sheet
. The component tag p:droppable
defines a datasource 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.
What it looks like after dropping three documents onto the Recycle Bin is reproduced in the following screenshot:
Available...