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.
Table 6.143. rich : dragIndicator attributes
Attribute Name | Description |
---|---|
acceptClass | Corresponds to the HTML class attribute and added to an indicator when a drop is accepted |
binding | The attribute takes a value-binding expression for a component property of a backing bean |
id | Every component may have a unique id that is automatically created if omitted |
rejectClass | Corresponds to the HTML class attribute and added to an indicator when a drop is rejected |
rendered | If "false", this component is not rendered |
style | CSS style(s) is/are to be applied when this component is rendered |
styleClass | Corresponds to the HTML class attribute |
Table 6.144. 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:
...
<dnd:dragIndicator id="indicator">
<f:facet name="single">
<f:verbatim>
<b>Single item</b> {DragInfo}
</f:verbatim>
</f:facet>
</dnd:dragIndicator>
...
<dnd: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:
Indicator shown when dragging a single element.
Indicator shown when dragging several components (for future components that will support multiple selection).
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:
For instance, this:
...
<dnd:dropSupport...>
<dnd:dndParam name="testDrop">
<h:graphicImage value="/images/file-manager.png" />
</dnd:dndParam>
</dnd:dropSupport>
...
..Is placed into indicator as follows:
...
<f:facet name="single">
{testDrop}
</f:facet>
...
Indicator can accept two default macro definitions:
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):
Parameter will be set instead of {marker} into indicator when a draggable element is positioned over drop zone that accept this type of elements
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
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.
Here you can see the example of <rich:dragIndicator> usage and sources for the given example.