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

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

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

The r:dropTarget component is used to define the drop zone. The r: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 r: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 r:dragSource and r:dropTarget components should be designed to render its children, and should have the mouseover and mouseout event attributes. You can use r:outputPanel as a container if the component does not satisfy these requirements. Use <r: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.