XUL Tutorial - 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 with-in the interface. For example, dragging files to other directories, or 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 objects around.

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 in-between.

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 pointer and where the object should be dropped. If something cannot be dragged, it should not start a drag session. Since the user generally only has one mouse, only one drag session is in use at a time.

Note that drag sessions can be created from with-in 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. They may be placed on any element. You only need to put values for the ones where you need to do something when the event occurs.

• ondraggesture
  Called when the user starts dragging the element. Usually, this will be by holding down the mouse button and moving the mouse. The script in this handler should set up a drag session.
• ondragover
  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 can be notified.
• ondragenter
  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.
• ondragexit
  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.
• ondragdrop
  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 JavaScript wrapper object that handles some of this for you. This wrapper is 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 used per 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:

invokeDragSession(element,transferableArray,region,actions);

• element
  A reference to the element that is being dragged. This can be retreived by getting the property event.target, during the event handler.
• transferableArray
  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.
• region
  A region used for feedback indication. This should usually be set to null.
• actions
  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.
  • nsIDragSession.DRAGDROP_ACTION_NONE
    Used to indicate that no drag is valid.
  • nsIDragSession.DRAGDROP_ACTION_COPY
    The item being dragged should be copied to its dropped location.
  • nsIDragSession.DRAGDROP_ACTION_MOVE
    The item being dragged should be moved to its dropped location.
  • nsIDragSession.DRAGDROP_ACTION_LINK
    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:

1. canDrop
   Set this property to 'true' if the element the mouse is currently over can accept the current dragged object 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.
2. dragAction
   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.
3. numDropItems
   The number of items being dragged. For example, this will be set to 5 if five bookmarks are being dragged.
4. 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.

---

(Next) In the next section, we'll see how to use the JavaScript wrapper for drag and drop.

XUL Tutorial - 8.5 - Drag and Drop
Previous Contents Reference Next