draggable zone rich:draggable HtmlDraggable drop zone

Component identification parameters

Name | Value
--- | ---
component-type | org.richfaces.Draggable
component-class | org.richfaces.component.html.HtmlDraggable
component-family | org.richfaces.Draggable
renderer-type | org.richfaces.DraggableRenderer
tag-class | org.richfaces.taglib.DraggableTag

## Creating the Component with a Page Tag

To create the simplest variant on a page use the following syntax:

Example:

    ...
        <rich:toolBar>
            <rich:draggable dragType="file">
                <!--Some Content to be Dragged-->
            </rich:draggable>
            ...
        </rich:toolBar>

## Creating the Component Dynamically Using Java

Example:

    ...
    org.richfaces.component.html.HtmlDraggable myDragZone = new org.richfaces.component.html.HtmlDraggable();
    ...

## Details of Usage

As it shown in the example, a key attribute is "dragType", where a name for an obtaining Drag-area is defined. Basing on this name, Drop-zones on a page decide whether to accept Drag-area content or not (with the help of Drag-areas lists accepted for processing that are defined in Drop-zones).

Example:

    ...
        <rich:draggable dragType="dragTextBlocks">
            <!--Some Components There-->
        </rich:draggable>
        <rich:draggable dragType="dragIcons">
            <!--Some Components There-->
        </rich:draggable>
        ...
        <rich:dropZone acceptedTypes="[dragIcons]">
             <!--Some Content Representing DropZone-->
        <rich:dropZone>
    ...

The example shows that Drop zone calls the corresponding drop event processing in it, only if a drop is generated from the second drop zone.

Another important attribute for <rich:draggable> is "dragIndicator" where the <rich:dragIndicator> component id is defined for this drag area. If it isn't defined drag area creates a default indicator for drag operation. Additional information on <rich:dragIndicator> and its usage with a drag, could be found on the following chapter dragIndicator.

Thus, it's necessary only to define the following:

Example:

    ...
        <rich:draggable dragType="dragText">
            <h:outputText value="Hello"></h:outputText>
        </rich:draggable>
    ...

in order to be able to drag this string on a page.

The component also provide important components for redefinition of the corresponding events called with the drag operations (ondragstart and ondragend), where it possible to define your own additional JavaScript functions that are called on the corresponding events.

## Look-and-Feel Customization

As it has been mention above, the component defines components wrapper for drag areas, i.e. it doesn't has its own representation. Therefore, for customization of a wrapper <div> element of the component it's possible to use a component attribute "styleClass" or redefine rich-draggable class in your own CSS files that is added to all draggable components style on default.