Read this chapter for details on adding drag and drop support to controls.
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.
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:
The
dragSourceidentifies the component being dragged (the parent of the<rich:dragSource>component).The
dragValueparameter is the content of the<rich:dragSource>component'sdragValueattribute.The
dropValueparameter is the content of the<rich:dropTarget>component'sdropValueattribute.
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
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.
acceptClassThe
acceptClassattribute specifies the style when the dragged element is over an acceptable drop target. It indicates that thetypeattribute of the element's<rich:dragSource>component matchesacceptedTypesattribute of the drop target's<rich:dropTarget>component.rejectClassThe
rejectClassattribute specifies the style when the dragged element is over a drop target that is not acceptable. It indicates that thetypeattribute of the element's<rich:dragSource>component is not found in theacceptedTypesattribute of the drop target's<rich:dropTarget>component.draggingClassThe
draggingClassattribute specifies the style when the dragged element is being dragged. It indicates that the dragged element is not over a drop target.