The Richfaces Drag-n-Drop component suite includes three components: rich:dragSource, rich:dropTarget, and rich:dragIndicator.

This example demonstrates the basic features of the RichFaces drag and drop mechanism. You can mark several different components as 'draggable' with the rich:dragSource component and define drag types with the type attribute. Then, add corresponding drop zones with the rich:dropTarget and use the acceptType attribute to define which drop zone corresponds to the dragged elements.

The rich:dragSource component defines the JSF component that becomes draggable. If you want to add a draggable feature to an existing component, attach rich:dragSupport as a child component.

The rich:dropTarget component is used to define the drop zone. The rich:dropTarget component has a built-in Ajax support: it can send an Ajax request and render the specified area on a page when the Ajax response is returned.

The rich:dragIndicator is a visual representation of a dragged object. The markup can be defined the markup of the indicator using nested components. By default, if the component is not defined a copy of the dragged elements are created.

Note: This example shows basic usage without an indicator defined. We are just using predefined CSS classes to customize the appearance for different states.

Note that the parent component for the rich:dragSource and rich:dropTarget components should be designed to render its children, and should have the mouseover and mouseout event attributes. You can use a4j:outputPanel as a container if the component does not satisfy these requirements. Use <a4j:outputPanel layout="block"> to wrap the component with a block layout.

The following example demonstrates the drag-and-drop functionality in practice. The left list contains the examples of Ajax frameworks. Do you know them? The demonstration helps you to sort them out. Drag an item over the headers of the other three panels. If the draggable framework is suitable for a certain framework family, it will be accepted and moved from the source list to the target list.