Tutorials > " .
$pagetitle="8.5 - Drag and Drop";
$customsidebar = "xultu-sidebar.php";
Drag and Drop
This section describes how to implement objects that can be dragged around
and dropped onto other objects.
The Drag and Drop Interface
Many user interfaces allow one to drag particular objects around within the
interface. For example, dragging files to other directories, or dragging an
icon to another window to open the document it refers to. Mozilla and XUL
provide a number of events that can handle when the user attempts to drag
A user can start dragging by holding down the mouse button and moving the
mouse. The drag stops when the user releases the mouse. Event handlers are
called when the user starts and ends dragging, and at various points
Mozilla implements dragging by using a drag session. When a user requests to
drag something that can be dragged, a drag session should be started. The
drag session handles updating the mouse cursor and where the object should
be dropped. If something cannot be dragged, it should not start a drag
session. Because the user generally has only one mouse, only one drag session
is in use at a time.
Note that drag sessions can be created from within Mozilla itself or from
other applications. Mozilla will translate the data being dragged as needed.
The list below describes the event handlers that can be called, which may be
placed on any element. You only need to put values for the handlers where you
need to do something when the event occurs.
Called when the user starts dragging the element, which normally happens
when the user holds down the mouse button and moves the mouse. The script
in this handler should set up a drag session.
This event handler is called for an element when something is being
dragged over top of it. If the object can be dropped on the element, the
drag session should be notified.
Called for an element when the mouse pointer first moves over the element
while something is being dragged. This might be used to change the
appearance of the element to indicate to the user that the object can be
dropped on it.
Called for an element when the mouse pointer moves out of an element while
something is being dragged. The is also called after a drop is complete so
that an element has a chance to remove any highlighting or other indication.
This event handler is called for an element when something is dropped on
the element. At this point, the user has already released the mouse button.
The element can simply ignore the event or can handle it some way, such as
pasting the dragged object into itself.
There are two ways that drag and drop events can be handled. This first invloves
using the drag and drop XPCOM interfaces directly. The second is to use a
contained in the widget-toolkit (or global) package.
XPCOM Drag and Drop
Two interfaces are used to support drag and drop. The first is a drag service,
nsIDragService and the second is the drag session, nsIDragSession.
The nsIDragService is responsible for creating drag sessions when a drag starts,
and removing the drag session when the drag is complete. The function
'invokeDragSession' should be called to start a drag inside an
ondraggesture event handler. Once this function is
called, a drag has started.
The function invokeDragSession takes four parameters, as described below:
A reference to the element that is being dragged. This can be retrieved
by getting the property event.target during the event handler.
An array of nsITransferable objects, one for each item being dragged.
An array is used because you might want to drag several objects at once,
such as a set of files.
A region used for feedback indication. This should usually be set to
The actions that the drag uses. This should be set to one of the following
constants, or several added together. The action can be changed during the
drag depending on what is being dragged over.
Used to indicate that no drag is valid.
The item being dragged should be copied to its dropped location.
The item being dragged should be moved to its dropped location.
A link (or shortcut or alias) to the item being dragged should be
created in the dropped location.
The interface nsIDragService also provides the function 'getCurrentSession' which
can be called from within the drag event handlers to get and modify the state of
the drag. The function returns an object that implements nsIDragSession.
The interface nsIDragSession is used to get and set properties of the drag that
is currently occuring. The following properties and methods are available:
Set this property to 'true' if the element the mouse is currently over can
accept the object currently being dragged to be dropped on it. Set
the value to 'false' if it doesn't make sense to drop the object on it. This
should be changed in the ondragover and
ondragenter event handlers.
Set to the current action to be performed, which should be one or more
of the constants described earlier. This can be used to provide extra
feedback to the user.
The number of items being dragged. For example, this will be set to 5
if five bookmarks are being dragged.
- getData (transfer,index)
Get the data being dragged. The first argument should be an nsITransferable
object to hold the data. The second argument, index, should be the index
of the item to return.
The document where the drag started.
The DOM node where the drag started.
Returns true if the data being dragged contains data of the specified