### Create new RichFaces Documentation Jira issue

Summary
255 characters left
Description
Environment
This will launch the RichFaces Jira page - to complete your feedback please login if needed, and submit the Jira.

JBoss.org Community Documentation

- Prev
- Next

### 6.7.5. < rich:dropSupport > available since 3.0.0

expand all

#### 6.7.5.1. Description

This component transforms a parent component into a target zone for drag-and-drop operations. When a draggable element is moved and dropped onto the area of the parent component, Ajax request processing for this event is started.

Figure 6.51. <rich:dropSupport> component

#### 6.7.5.2. Key Features

- Encodes all necessary JavaScript to perform drop actions

- Can be used within any component type that provides the required properties for drop operations

- Built-in Ajax processing

- Supports drag-and-drop between different forms

#### 6.7.5.3. Details of Usage

The key attribute for <rich:dropSupport> is "acceptedTypes" . It defines, which types of dragable items (zones) could be accepted by the current drop zone. Check the example below:

    <rich:panel styleClass="dropTargetPanel">

         <f:facet name="header">

              <h:outputText value="PHP Frameworks" />

         </f:facet>

         <rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP" dropListener="#{eventBean.processDrop}" reRender="phptable, src">

         </rich:dropSupport>

         ...

    </rich:panel>

and here is what happens on the page:

Figure 6.52. Drop zone accepts dragable item with "PHP" type only

Using the "typeMapping" attribute. Previous example shows that a drop zone could accept a dragable item or not. Special markers, which are placed at <rich:dragIndicator> , inform user about drop zone’s possible behaviors: "checkmark" appears if drop is accepted and "No" symbol if it is not. Moreover, some extra information (e.g. text message) could be put into the Indicator to reinforce the signal about drop zone’s behavior or pass some other additional sense. This reinforcement could be programmed and attributed to drop zone via "typeMapping" attribute using JSON syntax. The type of dragged zone (dragType) should be passed as "key" and name of <rich:dndParam> that gives needed message to Indicator as "value":

    <rich:panel styleClass="dropTargetPanel">

         <f:facet name="header">

              <h:outputText value="PHP Frameworks" />

         </f:facet>

         <rich:dropSupport id="php" acceptedTypes="PHP" dropValue="PHP" dropListener="#{eventBean.processDrop}" reRender="phptable, src"

                                  typeMapping="{PHP: text_for_accepting, DNET: text_for_rejecting}">

              <rich:dndParam name="text_for_accepting" value="Drop accepted!" />

              <rich:dndParam name="text_for_rejecting" value="Drop is not accepted!" />

         </rich:dropSupport>

         ...

    </rich:panel>

What happens on the page:

Figure 6.53. "typeMapping" helps to add some extra information to <rich:dragIndicator>

Here is an example of moving records between tables. The example describes all the pieces for drag-and-drop. As draggable items, this table contains a list of such items designated as being of type `"text"` :

    <rich:dataTable value="#{capitalsBean.capitals}" var="caps">

            <f:facet name="caption">Capitals List</f:facet>

            <h:column>

                    <a4j:outputPanel>

                            <rich:dragSupport dragIndicator=":form:ind" dragType="text">

                                    <a4j:actionparam value="#{caps.name}" name="name"/>

                            </rich:dragSupport>

                            <h:outputText value="#{caps.name}"/>

                    </a4j:outputPanel>

            </h:column>

    </rich:dataTable>

As a drop zone, this panel will accept draggable items of type `text` and then rerender an element with the ID of `box` :

    <rich:panel style="width:100px;height:100px;">

            <f:facet name="header">Drop Zone</f:facet>

            <rich:dropSupport acceptedTypes="text" reRender="box"

                            dropListener="#{capitalsBean.addCapital2}"/>

    </rich:panel>

As a part of the page that can be updated in a partial page update, this table has an ID of `box` :

    <rich:dataTable value="#{capitalsBean.capitals2}" var="cap2" id="box">

            <f:facet name="caption">Capitals chosen</f:facet>

            <h:column>

                    <h:outputText value="#{cap2.name}"/>

            </h:column>

    </rich:dataTable>

And finally, as a listener, this listener will implement the dropped element:

    public void addCapital2(DropEvent event) {

            FacesContext context = FacesContext.getCurrentInstance();

            Capital cap = new Capital();

            cap.setName(context.getExternalContext().getRequestParameterMap().get("name").toString());

            capitals2.add(cap);

    }

Here is the result after a few drops of items from the first table:

Figure 6.54. Results of drop actions

In this example, items are dragged element-by-element from the rendered list in the first table and dropped on a panel in the middle. After each drop, a drop event is generated and a common Ajax request is performed that renders results in the third table.

As with every Ajax action component, <rich:dropSupport> has all the common attributes ( "timeout" , "limitToList" , "reRender" , etc.) for Ajax request customization.

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

- "ondragenter"

- "ondragexit"

- "ondrop"

- "ondropend"

Developers can use their own custom JavaScript functions to handle these events.

Information about the "process" attribute usage you can find in the "Decide what to process" guide section .

#### 6.7.5.4. Reference Data

Table of <rich:dropSupport> attributes.

Table 6.72. Component Identification Parameters

Name | Value
--- | ---
component-type | org.richfaces.DropSupport
component-class | org.richfaces.component.html.HtmlDropSupport
component-family | org.richfaces.DropSupport
renderer-type | org.richfaces.DropSupportRenderer
tag-class | org.richfaces.taglib.DropSupportTag

#### 6.7.5.5. Relevant Resources Links

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

- Prev6.7.4. < rich:dropListener > ...
- Top of page
- Front page
- Next6.7.6. <rich:dndParam> available si...