Dojo: the browser toolkit

Drag and Drop Design Specification

Created on 2005-07-22 by Paul Sowden.


Drag and Drop intro.

Use Cases and Requirements

Drag and Drop involves 3 interfaces:

These can be implemented by objects. There exists a set of implementations provided to do certain tasks (eg. reordering, moving). Probably in more than 50% of cases the DragSource and DragObject interfaces are implemented on the same JS Object (or DOM Node) -- ie. the source is the thing being dragged. Only in more complex widgets where several types can be dragged out or widgets such as the date picker will they be different.

Markup syntax; two attributes dojoDrag and dojoDrop. The values of these attributes are "drag types". The tags cause the DOM Nodes to inherit a certain provided implementation, where the DragSource and DragObject interfaces both exist on the drag source.


The three interfaces correspond to the three stages of a drag and drop operation, the start (onmousedown and sometimes hold), the middle (onmousemove) and the end (onmouseup).

DragSource Interface

This interface needs to provide ways to:


interface DragSource {
  DragObject   ondrag(in DragEvent event);

DragObject Interface

This interface allows the object to define what happens to it during movement, which will mostly be constraining.


interface DragObject {
  readonly attribute String[]   dragTypes;
  Node       getDragIcon(); // usually defaults to cloneNode

DropTarget Interface


interface DropTarget {
  readonly attribute String[]   acceptedDragTypes;
   // corresponding to the mouseover, mousemove and mouseout
  void              ondragover(in DragEvent event);
  void              ondragmove(in DragEvent event);
  void               ondragout(in DragEvent event);
  void                  ondrop(in DragEvent event);

Provided Implementations

There should be a set of provided implementations which allow a developer to get off the ground with common use cases with a very small amount of effort. There should be at least as little and prefferably less code required to do the same effects as existing drag libraries, as a gauge of how well ours works.

When I get the undo manager polished off we should also provide undo/redo of drag and drop actions by default. Put that in your pipe and smoke it.