dragged element rich:dragIndicator HtmlDragIndicator dndParam

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

## Creating the Component with a Page Tag

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

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlDragIndicator;
    ...
    HtmlDragIndicator myDragIndicator = new HtmlDragIndicator();
    ...

## Details of Usage

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

The simplest <rich:dragIndicator>

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.

Note:

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.

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

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

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

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

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

## Relevant Resources Links

On the component LiveDemo page you can see the example of <rich:dragIndicator> usage and sources for the given example.