Drag-and-drop avatars

Avatars are used to represent the item being dragged. We can customize the avatar.

A drag-and-drop avatar is a class for the object that represents dragged items during drag-and-drop operations. We can customize the look of the drag-and-drop experience by modifying the default avatar. When dragging portlets, the avatar is a representation of the portlet markup.

The default drag-and-drop sources provide a creator function such as:

com.ibm.pb.dnd.layout.LayoutColumnSource.creator = function(item, hint){ ... }

The creator function checks whether the hint parameter is equal to avatar. If it is, it creates the node used to display while dragging.

See the following example:

creator: function(item, hint){
if(hint=="avatar"){
   ...             Modify this code to create a custom node that is to be used as the avatar.     The default avatar is the portlet markup itself.
   ...       }else{     ...                When there is no avatar creator function given, a default avatar is created.        The default avatar is based on the one defined in dojo.dnd.Source        in the functions _normalizedCreator/onDropExternal."
   ...       }
}

To modify the avatar used during a drag-and-drop operation, change the node returned by the creator function. The return value is a JavaScript object with the following attributes:

node

DOM node displayed as the avatar.

data

The drag-and-drop item created by the Dojo framework. This item is normally the same item sent into the creator.

type

The drag-and-drop type. The value lm is for layout controls and sm is for items on the site toolbar.

Parent: Drag-and-drop