Creating Drag and Drop Features

This tutorial guides you though creating an application that uses Drag and Drop.

For more information about building and deploying your project, refer to the tutorials in Chapter 4 of the ICEfaces Getting Started Guide.

Creating a Draggable Panel

The dragdrop1 directory contains an empty project, with a single .jspx file in the dragdrop1/web folder. dragDrop.jsp is empty aside from the basic code needed for an ICEFaces application.

1. Begin by adding a form.

<ice:form>
 

Note: All drag and drop panels must be in a form.

2. Inside the form, add a group panel and set the draggable attribute to true. The following example shows you how to do this and also has some added style information to give the panel a default size.

 
<ice:form>
 
		<ice:panelGroup style="z-index:10;width:200px;height:60px;background:

									#ddd;border:2px solid black;

									cursor:move;" draggable="true">
 
		</ice:panelGroup>
 
</ice:form>
 

3. Deploy the application.

http://localhost:8080/dragdrop1
 

To display the drag feature, click on the grey box to drag it around the screen.

Adding Drag Events

In the dragdrop1/src/com/icesoft/tutorial/ directory you will find the class, DragDropBean, which is an empty class. The class is mapped to the name dragDropBean in faces-config.xml.

1. Add a listener that will receive Drag events from the panel and a String property to display the value to the DragDropBean class.

private String dragPanelMessage = "Test";
 

 
    public void setDragPanelMessage(String s){
 
        dragPanelMessage = s;
 
    }        
 
    
 
    public String getDragPanelMessage(){
 
        return dragPanelMessage;
 
    }
 
    
 
    public void dragPanelListener(DragEvent dragEvent){
 
        dragPanelMessage = 
 
            "DragEvent = " + DragEvent.getEventName(dragEvent.getEventType());        
 
    }
 

2. In the dragDrop.jspx, set the dragListener attribute to point to dragPanelListener and output the message.

<ice:panelGroup style="z-index:10;width:200px;height:60px;

				background:#ddd;border:2px solid black;cursor:move;" 
 
				draggable="true" dragListener="#{dragDropBean.dragPanelListener}">
 
                                
 
      <ice:outputText value="#{dragDropBean.dragPanelMessage}"/>
 
</ice:panelGroup>
 

3. Deploy the application.

http://localhost:8080/dragdrop1
 

Now when you drag the panel around, the message changes. When you start to drag, the event is dragging; when released, it is drag_cancel.

There are five Drag and Drop Event types.

Event Type	Effect
Dragging	A panel is being dragged.
Drag Cancel	Panel has been dropped, but not on a drop target.
Dropped	Panel has been dropped on a drop target.
Hover Start	Panel is hovering over a drop target.
Hover End	Panel has stopped hovering over a drop target.

4. To see the other messages, add a new group panel with the dropTarget attribute set to true. Add the panel below the draggable panel, but within the same form.

<ice:panelGroup style="z-index:0;width:250px;height:100px;

							background:#FFF;border:2px solid black;"
 
							dropTarget="true">
 
  </ice:panelGroup>
 

5. Deploy the application.

http://localhost:8080/dragdrop1
 

Now when you drag the panel over the dropTarget panel, the messages will change.

Setting the Event dragValue and dropValue

Panels have a dragValue and a dropValue, which can be passed in Drag and Drop events.

1. In the dropTarget panel, set the dropValue attribute to "One", and then add a second panel group with a dropValue of "Two".

<ice:panelGroup style="z-index:0;width:250px;height:
 
						100px;background:#FFF;border:2px solid black;"
 
						dropTarget="true" dropValue="One">     
 
		<ice:outputText value="One"/>
 
</ice:panelGroup>
 
<ice:panelGroup style="z-index:0;width:250px;height:100px;background:
 
						#FFF;border:2px solid black;"
 
						dropTarget="true" dropValue="Two">     
 
		<ice:outputText value="Two"/>
 
</ice:panelGroup>
 

 

2. In the Drag Event, change the listener to extract the drop value from the drop targets.

public void dragPanelListener(DragEvent dragEvent){
 
        dragPanelMessage = 
 
            "DragEvent = " + DragEvent.getEventName(dragEvent.getEventType()) 
 
        + " DropValue:" + dragEvent.getTargetDropValue();        
 
}
 

 

3. Deploy the application.

http://localhost:8080/dragdrop1
 

Now when you hover or drop the drag panel on one of the drop targets, the message will change.

Event Masking

Event masks prevent unwanted events from being fired, thereby improving performance. panelGroup contains two attributes for event masking: dragMask and dropMask.

1. Change the dragMask in the drag panel to filter all events except dropped.

<ice:panelGroup style="z-index:10;width:200px;height:60px;

						background:#ddd;border:2px solid black; cursor:move;" 
 
						draggable="true" 
 
						dragListener="#{dragDropBean.dragPanelListener}"
 
						dragMask="dragging,drag_cancel,hover_start,hover_end">
 

2. Deploy the application.

Now when you drag the panel around, the message will only change when dropped on the "One" or "Two" panels. All of the other events are masked.

Copyright 2005-2009. ICEsoft Technologies, Inc.