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:

    ...
    		<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">
    		...
      </section>
      <section>
    <title>Creating the Component Dynamically Using Java</title>

        <para>
          <emphasis role="bold">Example:</emphasis>
        </para>
        <programlisting role="JAVA"><![CDATA[import org.richfaces.component.html.HtmlDragIndicator;
    HtmlDragIndicator myDragIndicator = new HtmlDragIndicator();
    ...

## Details of Usage

The component seems to be combined of two elements: an icon on the left and informational part on the right. The definition and usage is described further for each element.

### Indicator informational part

Inside the component, the definition should present for two facets with single and multiple names providing templates for rendering during dragging one or several elements. The facets define the right side of the indicator element.

The following elements on a page are obtained for a code defined in the example:

DragIndicator informational part

Hence, defining dndParam corresponding to drag areas, information transmitted into an indicator is defined.

### Indicator icon element

Inside the component there also could be definitions for three faces with "accept", "reject" and "default" names that specify icons on the left side according to states when an indicator is above:

- a drop zone that processes the facets written in the "acceptedTypes" attribute of this drop zone

- a drop zone that doesn't process the facets

- not above any drop zone

Here is an example for an accept facet:

    	  <f:facet name="accept">
    			<h:graphicImage value="./images/1.png"/>
    	  </f:facet>

Each of these three facets have a default structure for icons rendering on the left side.

When it's necessary to define individual icons for dragged above elements of a drop zone from each particular drag area, use the drop zone "typeMapping" attribute for the corresponding icons.

Example:

    <rich:dropSupport acceptedTypes="[iconsDragged, textDragged]"
    	typeMapping="{iconsDragged: DropIcon}">

    		<dnd:dndParam name="DropIcon">
    			<h:graphicImage value="/images/drop-icon.png" />
    		</dnd:dndParam>
    ...

Here, drag areas that are to be processed with this drop zone are of iconsDragged and textDragged type. An icon is redefined for iconsDragged with the help of the drop zone "typeMapping" attribute defined with the <rich:dndParam>component.