JSF Drag and Drop with Primefaces


JSF Drag and Drop with Primefaces
29 April 2018

In this tutorial we will learn how to perform Drag & Drop in your JSF applications using PrimeFaces library.

Drag & Drop with PrimeFaces

Drag-and-dropis an action, meaning grabbing an object and dragging it to a different location. Components capable of being dragged and dropped enrich the Web and make a solid base for modern UI patterns. The drag-and-drop utilities in PrimeFaces allow us to create draggable and droppable user interfaces efficiently. They make it abstract for developers to deal with the implementation details on a browser level.

In this tutorial, we will learn about PrimeFaces’ drag-and-drop utilities: Draggable and Droppable . AJAX-enhanced drag-and-drop and a special integration with data iteration components will be explained as well.

A component can be made draggable by using p:draggable . The component ID must match the for attribute of the p:draggable component. If the for attribute is omitted, the parent component will be selected as a draggable target. Let’s make some panel components draggable and apply some basic features:


The following screenshot shows the five panels. The last panel is being dragged. Its opacity has been changed to 0.5 after dragging starts.

How it works

By default, any point in a dragged component can be used as a handle. To restrict the drag-start click to a specified element(s), we can use the handle option, which is a jQuery selector . The second panel is dragged by using its header only.

By default, the actual component is used as a drag indicator. The helper option allows keeping the component at its original location during dragging. This can be achieved with helper set to clone as for the third panel.

If the revert option is set to true, the component will return to its starting position when dragging stops and the draggable component is not dropped onto a matching droppable component. The fourth panel features this behavior.

Opacityfor helper while it is being dragged is another useful option to give the user a visual feedback. The opacity of the fifth panel is reduced when dragging.

Defining droppable targets

Any component can be enhanced with a droppable behaviour. Droppable components are targets for draggable ones. To enable droppable functionality on any PrimeFaces component, we always need a component called Droppable. In this recipe, we will see how to defi ne droppable targets and 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.


Drop here

Drag me to my target

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) {



How it works

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.We use this fact to add the style class ui-state-highlight to the target. This class is defined by jQuery ThemeRoller. The event parameter is the original browser event, and ui is a prepared object with the following properties:

  • ui.draggable: This is the current draggable element,an jQuery object
  • ui.helper: This is the current draggable helper,an jQuery object
  • ui.position: This is the current position of the draggable helper { top: , left: }
  • ui.offset: This is the current absolute position of the draggable helper { top: , left: }

Using Drag and Drop with PrimeFaces File Upload

Some components like the

are natively able to perform Drag and Drop. For example, in order to allow Drag and Drop in your Forms, simply set the dragDropSupport attribute to “true” as in the following example:


The Backing Bean FileUploadView is needed to provide messages notification to the FacesContext:

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
import org.primefaces.event.FileUploadEvent;
import org.primefaces.model.UploadedFile;
public class FileUploadView {
    public void handleFileUpload(FileUploadEvent event) {
        FacesMessage message = new FacesMessage("Succesful", event.getFile().getFileName() + " is uploaded.");
        FacesContext.getCurrentInstance().addMessage(null, message);

Using Drag and Drop with PrimeFaces Datatable

As you can see from Primefaces showcase , using Drag & Drop with PrimeFaces datatable is quite straightforward. The javascript callback function handleDrop will provide the animation effect to be applied when the component is dropped. Also, one of the columns (the one containing the dragIcon) has the

element which means you can drag it. Where can it be dropped ? In a corresponding

    function handleDrop(event, ui) {
        var droppedCar = ui.draggable; 



As you can see, in order to handle the clone of the dndCarsView List, another List has been added to the dndCarsView called droppedCars. Each time a Drop Event occurs, the onCarDrop method receives a callback where the Car object is added into the List droppedCars:

public class DNDCarsView implements Serializable {
    private CarService service;
    private List cars;
    private List droppedCars;
    private Car selectedCar;
    public void init() {
        cars = service.createCars(9);
        droppedCars = new ArrayList();
    public void onCarDrop(DragDropEvent ddEvent) {
        Car car = ((Car) ddEvent.getData());
    public void setService(CarService service) {
        this.service = service;
    public List getCars() {
        return cars;
    public List getDroppedCars() {
        return droppedCars;
    public Car getSelectedCar() {
        return selectedCar;
    public void setSelectedCar(Car selectedCar) {
        this.selectedCar = selectedCar;






JSF Drag and Drop with Primefaces



The Public-Private Blockchain Singularity May Be Close At Hand



JSF Drag and Drop with Primefaces