JBoss.orgCommunity Documentation

Chapter 13. Drag and drop

13.1. <rich:dragSource>
13.1.1. Basic usage
13.1.2. Dragging an object
13.1.3. Reference data
13.2. <rich:dropTarget>
13.2.1. Basic usage
13.2.2. Handling dropped data
13.2.3. Reference data
13.2.4. Style classes
13.3. <rich:dragIndicator>
13.3.1. Basic usage
13.3.2. Styling the indicator
13.3.3. Reference data
13.3.4. Style classes

Read this chapter for details on adding drag and drop support to controls.

13.1. <rich:dragSource>

The <rich:dragSource> component can be added to a component to indicate it is capable of being dragged by the user. The dragged item can then be dropped into a compatible drop area, designated using the <rich:dropTarget> component.

To add drag support to a component, attach the <rich:dragSource> component as a child element.

The type attribute must be specified, and can be any identifying string. Dragged items can only be dropped in drop zones where the type attribute of the <rich:dragSource> component is listed in the acceptedTypes attribute of the <rich:dropTarget> component.

Use the dragIndicator parameter to customize the appearance of a dragged object while it is being dragged. The dragIndicator parameter must point to the id identifier of a <rich:dragIndicator> component. If the dragIndicator attribute is not defined, the drag indicator appears as a clone of the <rich:dragSource> component's parent control.

To bind data to the dragged object, use the dragValue attribute. The dragValue attribute specifies an item in a data model, which is then bound to the parent component when it is dragged. This facilitates handling event data during a drop event.

13.2. <rich:dropTarget>

The <rich:dropTarget> component can be added to a component so that the component can accept dragged items. The dragged items must support the <rich:dragSource> component, and be of a compatible drop type.

To allow dragged items to be dropped on a component, attach the <rich:dropTarget> component as a child element to the component.

The acceptedTypes attribute must be specified. The acceptedTypes attribute is a comma-separated list of strings that match the types of dragged items. Dragged items can only be dropped in drop zones where the type attribute of the <rich:dragSource> component is listed in the acceptedTypes attribute of the <rich:dropTarget> component.

The acceptedTypes attribute can optionally be set to either @none or @all. If set to @none, the component will not accept any type of dropped object. If set to @all, the component accepts all dropped objects. If the acceptedTypes attribute is not specified, the default value is null, which is the same as a @none setting.

To provide additional parameters for a drop event, use the dropValue attribute.

The <rich:dropTarget> component raises the DropEvent server-side event when an object is dropped. The event uses the following parameters:

Style classes (selectors)

.rf-drp-hvr

This class defines styles for the drop target when a dragged item is hovering over it.

.rf-drp-hlight

This class defines styles for a highlighted drop target.

13.3. <rich:dragIndicator>

The <rich:dragIndicator> component defines a graphical element to display under the mouse cursor during a drag-and-drop operation.

If included without any attributes specified, the drag indicator will appear as an empty dotted outline, as shown in

An empty drag indicator

[D]

Figure 13.1. An empty drag indicator


The drag indicator can be styled depending on the current state of the dragged element. There are three attributes for different states. The attributes reference the CSS class to use for styling the drag indicator when the dragged element is in the relevant state.

acceptClass

The acceptClass attribute specifies the style when the dragged element is over an acceptable drop target. It indicates that the type attribute of the element's <rich:dragSource> component matches acceptedTypes attribute of the drop target's <rich:dropTarget> component.

rejectClass

The rejectClass attribute specifies the style when the dragged element is over a drop target that is not acceptable. It indicates that the type attribute of the element's <rich:dragSource> component is not found in the acceptedTypes attribute of the drop target's <rich:dropTarget> component.

draggingClass

The draggingClass attribute specifies the style when the dragged element is being dragged. It indicates that the dragged element is not over a drop target.

Style classes (selectors)

.rf-ind

This class defines styles for the drag indicator.

.rf-ind-drag

This class defines styles for the indicator when it is being dragged.

.rf-ind-acpt

This class defines styles for the indicator when it is over an acceptable drop target.

.rf-ind-rejt

This class defines styles for the indicator when it is over an unacceptable drop target.