The Richfaces Drag-n-Drop component suite includes three components: dragSupport, dropSupport and dragIndicator.

dragSupport is used to point to the JSF component that becomes draggable. dragSupport is similar to Ajax4jsf <a4j:support>. If you want to add a draggable feature to the existing component, attach dragSupport as a child component to it.

dropSupport is similar to the dragSupport, but it's used to define the drag zone. dropSupport has a built-in Ajax support. I.e. it allows to send an Ajax request and re-render the specified area on a page when the Ajax response is returned back. With the dropListener attribute you can point to a method of the backing bean that accepts dropEvent as a parameter. This event contains information provided by dropValue and dragValue attributes of dropSupport and dragSupport.

Drag Indicator is a special visual representation of a dragged object. It contains a drag marker and a drag label by default, but you can freely define the necessary layout using a "single" facet for drag-n-drop of a single object or "multiple" for drag-n-drop on the group of objects

Note: The parent component for dragSupport and dropSupport should be designed to render its children and has two attribute "onmouseover" and "onmouseout". You can use <a4j:outputPanel> as a container if the component is not satisfy this requirements. Use <a4j:outputPanel> layout="block" to wrap the component with a block type layout. We will work to eliminate this restriction in future.

The following example demonstrates the drag-n-drop functionality on practice. The left list contains the examples of Ajax frameworks. Do you know them? The demo helps you to sort them out. Drag one and drag over the headers of three panels. If the draggable framework is suitable for a certain framework family, it will be accepted. Otherwise, the drag indicator shows the "reject" icon.

Drag-n-Drop example