JBoss.orgCommunity Documentation

Chapter 14. Drag and drop

14.1. <rich:dragSource>
14.1.1. Basic usage
14.1.2. Dragging an object
14.1.3. Reference data
14.2. <rich:dropTarget>
14.2.1. Basic usage
14.2.2. Handling dropped data
14.2.3. Reference data
14.2.4. Style classes
14.3. <rich:dragIndicator>
14.3.1. Basic usage
14.3.2. Styling the indicator
14.3.3. Reference data
14.3.4. Style classes

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

14.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 a server-side object, which is then bound to the parent component when it is dragged. This facilitates handling event data during a drop event.

14.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 be defined with a compatible drop type for the <rich:dragSource> component.

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 the server-side 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.

14.3. <rich:dragIndicator>

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

To use a drag indicator, define the inner content that appears during a drag event. No additional attributes are required. If a drag indicator is not used, a clone of the drag source is used instead.

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.accept

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

.rf-ind-drag.reject

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

.rf-ind-drag.default

This class defines styles for the indicator when it is being dragged, and is not over any drop targets.