Login Register

Terminology

Source: A source is an HTML node that can be dragged around. It can be a simple node, or a node which contains other nodes - a DIV, a TABLE, etc. In Dojo, a source has type dojo.dnd.Source.

Target: Target is like a placeholder, onto which nodes can be dropped. A good example is a shopping cart application, where an item icon is a source while the shopping cart is a target.

Interestingly, all dojo.dnd.Source objects in Dojo DnD are also targets, so many applications just use dojo.dnd.Source for both. For a pure target, i.e. one that's not draggable, you define the target with type dojo.dnd.Target.

Avatar: Avatar is kind of ghost image of the object being dragged. This ghost image follows the mouse cursor, till the time it is dropped to a proper placeholder. In Dojo this functionality is available to every drag and drop operation by default. The 'Dojo.dnd.Avatar' class does all this for you and displays a nice tooltop with text 'moving' or 'copying', indicating the type of operation being performed.

DnD Manager: The DnD Manager is a singleton, which is responsible for handling all DnD operations on a page. It accomplishes many complex tasks required for successful DnD operations like detecting initialization of valid drag operation by user, creation of Avatar, allowing drop to only eligible targets and such things. Most of the time the default manager works fine, but you can extend or create your own DnD Manager class for more complex scenarios.

Mover: Mover is a mixin class which makes an object (HTML node) movable. Once a node is made movable using this class, user can freely drag and drop the node anywhere on the page, for example a popup window. There is no concept of source and target in this case.

Selector : Selector is the base class for Source in Dojo. This means that every Source is a Selector. A Selector controls how its child nodes can be selected. This also means that every node that participates in DnD operation is part of some selectable list.

Container: Container is the baseclass for Selector. It provides functionality of sensing mouse movement over its children.

To sum up: a container contains nodes, a selector makes it possible to select single or multiple nodes, a mover makes the selected nodes movable, an Avatar provides visual cue during DnD and the DnD Manager makes the overall operation possible.