rich:dragSupport HtmlDragSupport

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.DragSupport
component-class | org.richfaces.component.html.HtmlDragSupport
component-family | org.richfaces.DragSupport
renderer-type | org.richfaces.DragSupportRenderer
tag-class | org.richfaces.taglib.DragSupportTag

## Creating the Component with a Page Tag

Here is a simple example as it could be used on a page:

Example:

    ...
        <h:panelGrid id="drag1">
            <rich:dragSupport dragType="item"/>
                <!--Some content to be dragged-->
        </h:panelGrid>
    ...

## Creating the Component Dynamically Using Java

Example:

    import org.richfaces.component.html.HtmlDragSupport;
    ...
    HtmlDragSupport myDragZone = new HtmlDragSupport();
    ...

## Details of Usage

The dragSupport tag inside a component completely specifies the events and JavaScript required to use the component and it's children for dragging as part of a drag-and-drop operation. In order to work, though, dragSupport must be placed inside a wrapper component that outputs child components and that has the right events defined on it. Thus, this example won't work, because the <h:column> tag doesn't provide the necessary properties for redefining events on the client:

Example:

    ...
        <h:column>
            <rich:dragSupport dragIndicator=":form:iii" dragType="text">
                <a4j:actionparam value="#{caps.name}" name="name"/>
            </rich:dragSupport>
            <h:outputText value="#{caps.name}"/>
        </h:column>
    ...

However, using a4j:outputPanel as a wrapper inside <h:column> , the following code could be used successfully:

Example:

    ...
        <h:column>
            <a4j:outputPanel>
                <rich:dragSupport dragIndicator=":form:iii" dragType="text">
                    <a4j:actionparam value="#{caps.name}" name="name"/>
                </rich:dragSupport>
                <h:outputText value="#{caps.name}"/>
            </a4j:outputPanel>
        </h:column>
    ...

This code makes all rows of this column draggable.

One of the main attributes for dragSupport is "dragType" , which associates a name with the drag zone. Only drop zones with this name as an acceptable type can be used in drag-and-drop operations. Here is an example:

Example:

    ...
        <h:panelGrid id="drag1">
            <rich:dragSupport dragType="singleItems" .../>
            <!--Some content to be dragged-->
        </h:panelGrid>
    ...
        <h:panelGrid id="drag2">
            <rich:dragSupport dragType="groups" .../>
            <!--Some content to be dragged-->
        </h:panelGrid>
    ...
        <h:panelGrid id="drop1">
            <rich:dropSupport acceptedTypes="singleItems" .../>
            <!--Drop zone content-->
        </h:panelGrid>
    ...

In this example, the `drop1` panel grid is a drop zone that invokes drag-and-drop for drops of items from the first `drag1` panel grid, but not the second `drag2` panel grid. In the section about dropSupport , you will find an example that shows more detailed information about moving data between tables with drag and drop.

The dragSupport component also has a "value" attribute for passing data into the processing after a drop event.

One more important attribute for <rich:dragSupport> is the "dragIndicator" attribute that point to the component id of the <rich:dragIndicator> component to be used for dragged items from this drag zone. If it isn't defined, a default indicator for drag operations is used.

Finally, the component has the following extra attributes for event processing on the client:

- "ondragstart"

- "ondragend"

You can use your own custom JavaScript functions to handle these events.

Note:

If you define width for a outputPanel, in Internet Explorer 6 you can perform a drag and drop operation, placing the mouse cursor on the text in the outputPanel only.

## Look-and-Feel Customization

<rich:dragSupport> has no skin parameters and custom style classes , as the component isn't visual.

## Relevant Resources Links

On the component Live Demo page you can see the example of <rich:dragSupport> usage and sources for the given example.