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.
