JBoss.org Community Documentation

- Prev
- Next

## 6.40. < rich:dragIndicator >

### 6.40.1. Description

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.

Figure 6.83. <rich:dragIndicator> component

### 6.40.2. Key Features

- Customizable look and feel

- Customizable marker according to the type of dragable elements

Table 6.152. 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.153. 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

### 6.40.3. Creating the Component with a Page Tag

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">

    ...

### 6.40.4. Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlDragIndicator;

    ...

    HtmlDragIndicator myDragIndicator = new HtmlDragIndicator();

    ...

### 6.40.5. Details of Usage

In the simplest way the component could be defined empty - in that case a default indicator is shown like this:

Figure 6.84. The simplest <rich:dragIndicator>

For indicator customization you need to define one of the following facets:

- "single"

Indicator shown when dragging a single element.

- "multiple"

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.

#### 6.40.5.1. Macro definitions

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:

    ...

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

    ...

#### 6.40.5.2. Predefined macro definitions

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

#### 6.40.5.3. Marker customization

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

## Note:

If you use <rich:dragIndicator> inside a form do not forget to use id like `formId:indicatorID` defined in <rich:dragSupport> indicator attribute.

### 6.40.6. Look-and-Feel Customization

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.

### 6.40.7. Relevant Resources Links

Here you can see the example of <rich:dragIndicator> usage and sources for the given example.

- Prev6.39. < rich:dndParam >
- Top of page
- Front page
- Next6.41. < rich:dragSupport >