Create new RichFaces Documentation Jira issue
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.
JBoss.orgCommunity Documentation
This is a component for defining what appears under the mouse cursor during drag-and-drop operations. The displayed drag indicator can show information about the dragged elements.
Customizable look and feel
Customizable marker according to the type of dragable elements
Table 6.133. rich : dragIndicator attributes
| Attribute Name |
Description
|
|---|---|
| acceptClass | Assigns one or more space-separated CSS class names to the indicator which are applied when a drop is accepted |
| binding | JSF: The attribute takes a value-binding expression for a component property of a backing bean |
| id | JSF: Every component may have a unique id that is automatically created if omitted |
| rejectClass | Assigns one or more space-separated CSS class names to the indicator which are applied when a drop is rejected |
| rendered | JSF: If "false", this component is not rendered |
| style | HTML: CSS style rules to be applied to the component |
| styleClass | JSF: Assigns one or more space-separated CSS class names to the component. Corresponds to the HTML "class" attribute. |
Table 6.134. Component identification parameters
| Name | Value |
|---|---|
| component-type | org.richfaces.Draggable |
| component-class | org.richfaces.component.html.HtmlDragIndicator |
| component-family | org.richfaces.DragIndicator |
| renderer-type | org.richfaces.DragIndicatorRenderer |
| tag-class | org.richfaces.taglib.DragIndicatorTag |
Here is a simple example as it could be used on a page:
Example:
...
<rich:dragIndicator id="indicator">
<f:facet name="single">
<f:verbatim>
<b>Single item</b> {DragInfo}
</f:verbatim>
</f:facet>
</rich:dragIndicator>
...
<rich:dragSupport dragType="text" dragIndicator="indicator"/>
...
Example:
import org.richfaces.component.html.HtmlDragIndicator;
...
HtmlDragIndicator myDragIndicator = new HtmlDragIndicator();
...
In the simplest way the component could be defined empty - in that case a default indicator is shown like this:
For indicator customization you need to define one of the following facets:
"single" — indicator shown when dragging a single item;
"multiple" — indicator shown when dragging several items.
The current implementation of the <rich:dragIndicator> component does not support multiple items selection. The feature is described for future releases.
Thus for specify a look-and-feel you have to define one of these facets and include into it a content that should be shown in indicator.
To place some data from drag or drop zones into component you can use macro definitions. They are being defining in the following way:
<rich:dndParam> component with a specific name and value is being included into a drag/drop support component (an image can be defined as placed inside <rich:dndParam> without defining a value).
in needed place a parameter value is included into the marking of indicator using syntax (name of parameter)
For instance, this:
...
<rich:dropSupport...>
<rich:dndParam name="testDrop">
<h:graphicImage value="/images/file-manager.png" />
</rich:dndParam>
</rich:dropSupport>
...
Is placed into indicator as follows:
...
<f:facet name="single">
{testDrop}
</f:facet>
...
Indicator can accept two default macro definitions:
marker
label
Thus including one of these elements in the marking of indicator, in other words after setting up appropriate parameters in DnD components and defining only default indicator - without specifying facets - a developer gets these parameters values displayed in indicator in the order "marker - label".
The macro definition "marker" can be customized depending on what a draggable element is located over. For that you should define one of these three parameters (specify a parameter with one of three names):
accept
Parameter will be set instead of {marker} into indicator when a draggable element is positioned over drop zone that accept this type of elements
reject
Parameter is set instead of {marker} into indicator when a draggable element is positioned over drop zone that doesn't accept this type of elements
default
Parameter is set instead of {marker} into indicator when a draggable element is positioned over all the rest of page elements
If you use
<rich:dragIndicator>
inside a form
do not forget to use id like formId:indicatorID
defined in
<rich:dragSupport>
indicator attribute.
The <rich:dragIndicator> component has no skin parameters and special style classes , as it consists of one element generated with a your method on the server. To define some style properties such as an indent or a border, it's possible to use "style" and "styleClass" attributes on the component.
On the component LiveDemo page you can see the example of <rich:dragIndicator> usage and sources for the given example.
