← 7 User interactionTable of contents8 The HTML syntax →
    1. 7.7 Drag and drop
      1. 7.7.1 Introduction
      2. 7.7.2 The drag data store
      3. 7.7.3 The DataTransfer interface
        1. 7.7.3.1 The DataTransferItems interface
        2. 7.7.3.2 The DataTransferItem interface
      4. 7.7.4 The DragEvent interface
      5. 7.7.5 Events summary
      6. 7.7.6 The draggable attribute
      7. 7.7.7 The dropzone attribute
    2. 7.8 Editing APIs

7.7 Drag and drop

This section defines an event-based drag-and-drop mechanism.

This specification does not define exactly what a drag-and-drop operation actually is.

On a visual medium with a pointing device, a drag operation could be the default action of a mousedown event that is followed by a series of mousemove events, and the drop could be triggered by the mouse being released.

On media without a pointing device, the user would probably have to explicitly indicate his intention to perform a drag-and-drop operation, stating what he wishes to drag and where he wishes to drop it, respectively.

7.7.1 Introduction

To make an element draggable is simple: give the element a draggable attribute, and set an event listener for dragstart that stores the data being dragged.

The event handler typically needs to check that it's not a text selection that is being dragged, and then needs to store data into the DataTransfer object and set the allowed effects (copy, move, link, or some combination).

For example:

<p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)">
 <li draggable="true" data-value="fruit-apple">Apples</li>
 <li draggable="true" data-value="fruit-orange">Oranges</li>
 <li draggable="true" data-value="fruit-pear">Pears</li>
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dragStartHandler(event) {
    if (event.target instanceof HTMLLIElement) {
      // use the element's data-value="" attribute as the value to be moving:
      event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
      event.dataTransfer.effectAllowed = 'move'; // only allow moves
    } else {
      event.preventDefault(); // don't allow selection to be dragged
    }
  }
</script>

To accept a drop, the drop target has to have a dropzone attribute and listen to the drop event.

The value of the dropzone attribute specifies what kind of data to accept (e.g. "s:text/plain" to accept any text strings, or "f:image/png" to accept a PNG image file) and what kind of feedback to give (e.g. "move" to indicate that the data will be moved).

Instead of using the dropzone attribute, a drop target can handle the dragenter event (to report whether or not the drop target is to accept the drop) and the dragover event (to specify what feedback is to be shown to the user).

The drop event allows the actual drop to be performed. This event needs to be canceled, so that the dropEffect attribute's value can be used by the source (otherwise it's reset).

For example:

<p>Drop your favorite fruits below:</p>
<ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
 <-- don't forget to change the "text/x-example" type to something
 specific to your site -->
</ol>
<script>
  var internalDNDType = 'text/x-example'; // set this to something specific to your site
  function dropHandler(event) {
    var li = document.createElement('li');
    var data = event.dataTransfer.getData(internalDNDType);
    if (data == 'fruit-apple') {
      li.textContent = 'Apples';
    } else if (data == 'fruit-orange') {
      li.textContent = 'Oranges';
    } else if (data == 'fruit-pear') {
      li.textContent = 'Pears';
    } else {
      li.textContent = 'Unknown Fruit';
    }
    event.target.appendChild(li);
  }
</script>

To remove the original element (the one that was dragged) from the display, the dragend event can be used.

For our example here, that means updating the original markup to handle that event:

<p>What fruits do you like?</p>
<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
 ...as before...
</ol>
<script>
  function dragStartHandler(event) {
    // ...as before...
  }
  function dragEndHandler(event) {
    // remove the dragged element
    event.target.parentNode.removeChild(event.target);
  }
</script>

7.7.2 The drag data store

The data that underlies a drag-and-drop operation, known as the drag data store, consists of the following information:

When a drag data store is created, it must be initialized such that its drag data store item list is empty, it has no drag data store default feedback, its drag data store elements list is empty, it has no drag data store bitmap / drag data store hot spot coordinate, its drag data store mode is protected mode, and its drag data store allowed effects state is the string "uninitialized".

7.7.3 The DataTransfer interface

DataTransfer objects are used to expose the drag data store that underlies a drag-and-drop operation.

interface DataTransfer {
           attribute DOMString dropEffect;
           attribute DOMString effectAllowed;

  readonly attribute DataTransferItems items;

  void setDragImage(in Element image, in long x, in long y);
  void addElement(in Element element);

  /* old interface */
  readonly attribute DOMStringList types;
  DOMString getData(in DOMString format);
  void setData(in DOMString format, in DOMString data);
  void clearData(in optional DOMString format);
  readonly attribute FileList files;
};
dataTransfer . dropEffect [ = value ]

Returns the kind of operation that is currently selected. If the kind of operation isn't one of those that is allowed by the effectAllowed attribute, then the operation will fail.

Can be set, to change the selected operation.

The possible values are "none", "copy", "link", and "move".

dataTransfer . effectAllowed [ = value ]

Returns the kinds of operations that are to be allowed.

Can be set, to change the allowed operations.

The possible values are "none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", and "uninitialized",

dataTransfer . items

Returns a DataTransferItems object, with the drag data.

dataTransfer . setDragImage(element, x, y)

Uses the given element to update the drag feedback, replacing any previously specified feedback.

dataTransfer . addElement(element)

Adds the given element to the list of elements used to render the drag feedback.

dataTransfer . types

Returns a DOMStringList listing the formats that were set in the dragstart event. In addition, if any files are being dragged, then one of the types will be the string "Files".

data = dataTransfer . getData(format)

Returns the specified data. If there is no such data, returns the empty string.

dataTransfer . setData(format, data)

Adds the specified data.

dataTransfer . clearData( [ format ] )

Removes the data of the specified formats. Removes all data if the argument is omitted.

dataTransfer . files

Returns a FileList of the files being dragged, if any.

DataTransfer objects are used during the drag-and-drop events, and are only valid while those events are being dispatched.

7.7.3.1 The DataTransferItems interface

Each DataTransfer object is associated with a DataTransferItems object.

interface DataTransferItems {
  readonly attribute unsigned long length;
  getter DataTransferItem (in unsigned long index);
  deleter void (in unsigned long index);
  void clear();

  DataTransferItem add(in DOMString data, in DOMString type);  DataTransferItem add(in File data);};
items . length

Returns the number of items in the drag data store.

items[index]

Returns the DataTransferItem object representing the indexth entry in the drag data store.

delete items[index]

Removes the indexth entry in the drag data store.

items . clear()

Removes all the entries in the drag data store.

items . add(data)
items . add(data, type)

Adds a new entry for the given data to the drag data store. If the data is plain text then a type string has to be provided also.

7.7.3.2 The DataTransferItem interface

Each DataTransferItem object is associated with a DataTransfer object.

interface DataTransferItem {
    readonly attribute DOMString kind;
    readonly attribute DOMString type;
    void getAsString(in FunctionStringCallback callback);    File getAsFile();};

[Callback=FunctionOnly, NoInterfaceObject]
interface FunctionStringCallback {
  void handleEvent(in DOMString data);
};
item . kind

Returns the drag data item kind, one of: "string", "file".

item . type

Returns the drag data item type string.

item . getAsString(callback)

Invokes the callback with the string data as the argument, if the drag data item kind is Plain Unicode string.

file = item . getAsFile()

Returns a File object, if the drag data item kind is File.

7.7.4 The DragEvent interface

The drag-and-drop processing model involves several events. They all use the DragEvent interface.

interface DragEvent : MouseEvent {
  readonly attribute DataTransfer dataTransfer;

  void initDragEvent(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg, in long detailArg, in long screenXArg, in long screenYArg, in long clientXArg, in long clientYArg, in boolean ctrlKeyArg, in boolean altKeyArg, in boolean shiftKeyArg, in boolean metaKeyArg, in unsigned short buttonArg, in EventTarget relatedTargetArg, in DataTransfer dataTransferArg);
};
event . dataTransfer

Returns the DataTransfer object for the event.

The initDragEvent() method must initialize the event in a manner analogous to the similarly-named method in the DOM Events interfaces, except that the dummyArg argument must be ignored. [DOMEVENTS]

7.7.5 Events summary

The following events are involved in the drag-and-drop model.

Event Name Target Cancelable? Drag data store mode dropEffect Default Action
dragstart Source node ✓ Cancelable Read/write mode "none" Initiate the drag-and-drop operation
drag Source node ✓ Cancelable Protected mode "none" Continue the drag-and-drop operation
dragenter Immediate user selection or the body element ✓ Cancelable Protected mode Based on effectAllowed value Reject immediate user selection as potential target element
dragleave Previous target element Protected mode "none" None
dragover Current target element ✓ Cancelable Protected mode Based on effectAllowed value Reset the current drag operation to "none"
drop Current target element ✓ Cancelable Read-only mode Current drag operation Varies
dragend Source node Protected mode Current drag operation Varies

Not shown in the above table: all these events bubble, and the effectAllowed attribute always has the value it had after the previous event was fired, defaulting to "uninitialized" in the dragstart event.

7.7.6 The draggable attribute

All HTML elements may have the draggable content attribute set. The draggable attribute is an enumerated attribute. It has three states. The first state is true and it has the keyword true. The second state is false and it has the keyword false. The third state is auto; it has no keywords but it is the missing value default.

The true state means the element is draggable; the false state means that it is not. The auto state uses the default behavior of the user agent.

element . draggable [ = value ]

Returns true if the element is draggable; otherwise, returns false.

Can be set, to override the default and set the draggable content attribute.

7.7.7 The dropzone attribute

All HTML elements may have the dropzone content attribute set. When specified, its value must be an unordered set of unique space-separated tokens that are ASCII case-insensitive. The allowed values are the following:

copy

Indicates that dropping an accepted item on the element will result in a copy of the dragged data.

move

Indicates that dropping an accepted item on the element will result in the dragged data being moved to the new location.

link

Indicates that dropping an accepted item on the element will result in a link to the original data.

Any keyword with three characters or more, beginning with the two characters U+0073 LATIN SMALL LETTER S and U+003A COLON or U+0053 LATIN CAPITAL LETTER S and U+003A COLON (i.e. an ASCII case-insensitive match for the string "s:")

Indicates that items with the drag data item kind Plain Unicode string and the drag data item type string set to a value that matches the remainder of the keyword are accepted.

Any keyword with three characters or more, beginning with the two characters U+0066 LATIN SMALL LETTER F and U+003A COLON or U+0046 LATIN CAPITAL LETTER F and U+003A COLON (i.e. an ASCII case-insensitive match for the string "f:")

Indicates that items with the drag data item kind File and the drag data item type string set to a value that matches the remainder of the keyword are accepted.

The dropzone content attribute's values must not have more than one of the three feedback values (copy, move, and link) specified. If none are specified, the copy value is implied.

The dropzone IDL attribute must reflect the content attribute of the same name.

In this example, a div element is made into a drop target for image files using the dropzone attribute. Images dropped into the target are then displayed.

<div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
 <p>Drop an image here to have it displayed.</p>
</div>
<script>
 function receive(event, element) {
   var data = event.dataTransfer.items;
   for (var i = 0; i < data.length; i += 1) {
     if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
       var img = new Image();
       img.src = window.createObjectURL(data[i].getAsFile());
       element.appendChild(img);
     }
   }
 }
</script>

7.8 Editing APIs

document . execCommand(commandId [, showUI [, value ] ] )

Runs the action specified by the first argument, as described in the list below. The second and third arguments sometimes affect the action. (If they don't they are ignored.)

document . queryCommandEnabled(commandId)

Returns whether the given command is enabled, as described in the list below.

document . queryCommandIndeterm(commandId)

Returns whether the given command is indeterminate, as described in the list below.

document . queryCommandState(commandId)

Returns the state of the command, as described in the list below.

document . queryCommandSupported(commandId)

Returns true if the command is supported; otherwise, returns false.

document . queryCommandValue(commandId)

Returns the value of the command, as described in the list below.

A document is ready for editing host commands if it has a selection that is entirely within an editing host, or if it has no selection but its caret is inside an editing host.

The possible values for commandId, and their corresponding meanings, are as follows.

bold
Summary: Toggles whether the selection is bold.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: True if the selection, or the caret, if there is no selection, is, or is contained within, a b element. False otherwise.
Value: The string "true" if the expression given for the "State" above is true, the string "false" otherwise.
createLink
Summary: Toggles whether the selection is a link or not. If the second argument is true, and a link is to be added, the user agent will ask the user for the address. Otherwise, the third argument will be used as the address.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
delete
Summary: Deletes the selection or the character before the cursor.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
formatBlock
Summary: Wraps the selection in the element given by the third argument. If the third argument doesn't specify an element that is a formatBlock candidate, does nothing.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
forwardDelete
Summary: Deletes the selection or the character after the cursor.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
insertImage
Summary: Toggles whether the selection is an image or not. If the second argument is true, and an image is to be added, the user agent will ask the user for the address. Otherwise, the third argument will be used as the address.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
insertHTML
Summary: Replaces the selection with the value of the third argument parsed as HTML.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
insertLineBreak
Summary: Inserts a line break.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
insertOrderedList
Summary: Toggles whether the selection is an ordered list.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
insertUnorderedList
Summary: Toggles whether the selection is an unordered list.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
insertParagraph
Summary: Inserts a paragraph break.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
insertText
Summary: Inserts the text given in the third parameter.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
italic
Summary: Toggles whether the selection is italic.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: True if the selection, or the caret, if there is no selection, is, or is contained within, a i element. False otherwise.
Value: The string "true" if the expression given for the "State" above is true, the string "false" otherwise.
redo
Summary: Acts as if the user had requested a redo.
Enabled When: The undo position is not at the end of the undo transaction history.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
selectAll
Summary: Selects all the editable content.
Enabled When: Always.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
subscript
Summary: Toggles whether the selection is subscripted.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: True if the selection, or the caret, if there is no selection, is, or is contained within, a sub element. False otherwise.
Value: The string "true" if the expression given for the "State" above is true, the string "false" otherwise.
superscript
Summary: Toggles whether the selection is superscripted.
Enabled When: The document is ready for editing host commands.
Indeterminate When: Never.
State: True if the selection, or the caret, if there is no selection, is, or is contained within, a sup element. False otherwise.
Value: The string "true" if the expression given for the "State" above is true, the string "false" otherwise.
undo
Summary: Acts as if the user had requested an undo.
Enabled When: The undo position is not at the start of the undo transaction history.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
unlink
Summary: Removes all links from the selection.
Enabled When: The document has a selection that is entirely within an editing host and that contains (either partially or completely) at least one a element that has an href attribute.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".
unselect
Summary: Unselects everything.
Enabled When: Always.
Indeterminate When: Never.
State: Always false.
Value: Always the string "false".