Drag and Drop Framework Usage Guideline 
RCUX Document Version 5.1.0 for Oracle® Fusion Middleware 11g Release 1 Patch Set 1 (11.1.1.2.0)
Last Updated 17-Nov-2010
The Drag and Drop Framework provides functionality allowing users to perform actions on objects by moving them with a mouse.
- General Principles
- Drag and Drop Operations
- Drag and Drop Within a Component
- Drag and Drop Between Components
Related Guidelines
| Guideline | Section | For Information About |
|---|---|---|
| Table Display Manipulation | Resize Column | Using drag and drop to change the width of a table column. |
| Table Display Manipulation | Reorder Columns | Using drag and drop to change the order of table columns. |
Related ADF Elements
Refer to the ADF Faces Rich Client demos page to find demos and tag documentation for the ADF elements related to this component:
| ADF Element | Notes |
|---|---|
| af:componentDragSource | Makes a component draggable (Move operation only). |
| af:dragSource | Makes a component specify a default drag source. |
| af:dropTarget | Specifies a component to be used as a drop target. |
| af:dataFlavor | Limits the types of objects that can be accepted by a drop target. |
| af:attributeDragSource | Allows a text-based attribute of a component to be used as a drag source (Copy operation only). |
| af:attributeDropTarget | Sets an attribute for a component that is used as a drop target (Copy operation only). |
| af:collectionDragSource | Allows a Table or tree table to be used as a drag source. |
| af:collectionDropTarget | Allows a table or Tree table to be used as a drop target. |
General Principles
Purpose:
Provides a method of performing actions on objects by direct manipulation with a mouse.
Description:
- Product teams can implement drag and drop functionality to copy or move an object between two components by specifying the drag source and drop target.
- Any page element that represents a data object may serve as a drag source.
- A component may serve as a drop target if business logic permits it to accept the type of object being dragged.
- Drag and drop functionality within a component is the responsibility of ADF. ADF does not recommend that individual developers try to implement component-level drag and drop functionality on their own. Currently, ADF supports the following drag and drop operations within Table, TreeTable, Gantt, Hierarchy Viewer, and Pivot Table components:
- Resize a table column. See Resize Column in the Table Display Manipulation guideline.
- Reorder table columns. See Reorder Columns in the Table Display Manipulation guideline.
- Move, resize, merge, update, and link Gantt taskbars. See the Gantt guideline for details.
- Move Pivot Table data layers. See Pivot in the Pivot Table guideline.
- Resize Pivot Table headers, rows, and columns. See Resize in the Pivot Table guideline.
- Panning in Hierarchy Viewer. See the Hierarchy Viewer guideline.
Usage:
- Drag and drop is ideal for manipulating objects in relation to each other, and is particularly useful for changing the relative positions of objects.
- In cases where the task simply requires object selection, it is preferable to use click-select (click one or more objects to perform the selection) instead of drag-select (drag the mouse pointer across the objects to select them).
- The data that is dragged should be target-specific. For example, if a user drags a set of objects that consists of persons and locations into an Employee List, only the objects representing persons should show up in the Employee List.
- Drag and drop may be the most efficient method for many users to perform certain actions, but it may be less useful for users who perform extensive data entry, and may be inaccessible for others, such as screen reader users.
Accessibility
As drag and drop is currently not accessible, product teams must also implement an alternate user interface method to accomplish each drag and drop action.
Examples of alternate user interface methods of accomplishing the same task as drag and drop include:
- Presenting the user with a method of selecting objects, then clicking a "Move" button or a button named specifically for the action, such as an "Add to Cart" button.
- Using a shuttle to move items from one area to another.
- Selecting items and using a menu to choose an action.
- Keyboard shortcuts for the drag and drop actions should be as follows:
- Move a file: press CTRL+ {draganddrop} to copy the file into the new location
- Copy a file: press SHIFT+ {draganddrop} to cut and paste the file into the new location
- Create a link (shortcut) of the source file in a destination folder: press ALT+ {draganddrop}.
Native Support for Drag and Drop in ADF
ADF provides some drag and drop elements, including drag feedback, ghosting, cursors, and drop validation. The ADF drag and drop framework provides feedback at the following points during a drag and drop operation:
- When the data is selected
- While dragging the data
- When an appropriate destination is reached
- When the data is dropped.
Custom Development for Drag and Drop
Product teams must configure components as drag sources and as drop targets to implement drag and drop in their applications. Depending on the type of drag and drop operation, a product team may also need to provide the following functionality:
- Reordering after dropping an object into a list.
- Auto-scrolling to display a region of the page that is out of view.
- Drag and drop between an ADF secondary window and the primary window.
- Dialogs for selecting drag and drop operations when more than one action is valid (see Selecting a Drag and Drop Operation below).
- Custom code "listeners" when working with complex elements, such as a table row.
For more information, see the sections below and the chapter on Adding Drag and Drop Functionality in the ADF developer documentation.
Drag and Drop Operations
Drag and drop operations include moving or copying selected objects by dragging them from one location and dropping them into another within a browser window.
- Product teams can provide drag and drop operations between two components on the same page.
- Drag and drop operations are restricted to elements that can be selected.
Move
Purpose:
Relocates an object from one place to another within the same component or between components (equivalent to Cut and Paste commands).
Moving Multiple Objects
Usage:
- A Move operation should occur when a user drags an object and either:
- The application requires that the object exist solely in either the drag and drop source or destination, or
- The object may exist in both locations, and the user chooses to move the object rather than copy it to the destination location. See Selecting a Drag and Drop Operation below.
- See Accessibility for the move operation keyboard shortcut.
Copy
Purpose:
Replicates an object within the same component or in another component (equivalent to Copy and Paste commands).
Copying an Object
Usage:
- A Copy operation occurs when a user drags an object and both of the following conditions are true:
- The application permits the object to exist in both the drag and drop source and destination locations, and
- It is necessary (based on usage) to replicate the object in the destination.
- See Accessibility for the copy operation keyboard shortcut.
If other actions are also permitted, see Selecting a Drag and Drop Operation below.
Selecting a Drag and Drop Operation
If an object supports both Copy and Move operations, product teams should provide a method to allow users to choose between Copy and Move, such as a dialog. This approach is strongly recommended, because it is preferable to provide a choice rather than choosing an action by default.
Use of a Dialog to Specify an Action
Drag and Drop Within a Component
Drag and drop within a component is available with the Table, TreeTable, Gantt, Hierarchy Viewer, and PivotTable components. Refer to General Principles in this guideline for details.
Dragging a Column to Reorder a Table
Drag and Drop Between Components
Product teams can implement drag and drop functionality to copy and move an object between two components using the native ADF drag and drop support. Common drag and drop actions between components include:
- Flat List to Flat List, such as table to table.
- Hierarchy to Flat List, such as tree to table.
- Flat List to Hierarchy, such as table to tree.
- Hierarchy to Hierarchy, such as tree to tree.
See the following subsections for examples.
Usage:
- Objects can be dragged and dropped between two components of the same or different types.
- When providing drag and drop between two components:
- If an item is dragged from one component to another, the destination component should show the dropped item in view.
- If multiple items are selected and moved, the items should retain their original order in the destination component unless the user has specified a different sort order in that component.
- The components involved in a drag and drop action must each have a label to identify them to users.
- When a drag and drop action changes the underlying data, provide a method for users to save the changes.
- See Accessibility for the linking operation keyboard shortcut.
Flat List to Flat List
Usage:
A flat list to flat list operation is useful for copying or moving one or more selected objects of the same type between two containers.
Example:
A user is working with two tables, each containing a budget plan with a list of line items. The tables share the same standard line items, so the user can copy them from one table to another.
Dragging a Line Item from One Table to Another
Hierarchy to Flat List
Usage:
A hierarchy to flat list operation is useful for copying or moving selected grouped objects to a single-level container.
Description:
- The hierarchy may support dragging of:
- One or more parent objects together with child objects
- One or more child objects
- A parent object containing child objects from the hierarchy may be presented as a collective group or split into individual discrete objects when dropped into a flat list. For instance, if the hierarchy contains a list of folders with documents, and the flat list can obtain both folders and documents as objects, then a folder dropped into the flat list can either show the folder as a single entity or break up the folder and its documents as separate entities.
Example:
On a tree/list view page where a table contains the list, the user may want to relocate another object from the tree by dragging it to the details table of the currently-selected object.
Dragging a Folder from a Tree to a Table
Flat List to Hierarchy
Usage:
A flat list to hierarchy operation is useful for copying or moving selected objects to a hierarchical group.
Description:
When multiple objects are dropped in the hierarchy, they are positioned as peers beneath the target parent object.
Example:
On a tree/list view page where a table contains the list, a user can move or copy files from the table to a folder in the tree.
Dragging a File from a Table to a Tree
Hierarchy to Hierarchy
Usage:
A hierarchy to hierarchy operation is useful for copying or moving selected individual or groups of objects between two multi-level containers.
Description:
- The hierarchy may support dragging of:
- One or more parent objects together with child objects
- One or more child objects
- When multiple peer objects are dropped in the target hierarchy, they are positioned as peers beneath the target parent object.
- When parent and child objects are dropped in the target hierarchy, their parent-child relationships remain unchanged.
Example:
An administrator needs to transfer an employee between two organizations with a company. Each organization consists of different divisions and departments represented hierarchically by a tree.
Dragging an Object from One Tree to Another
