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.
This section is non-normative.
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>
The data that underlies a drag-and-drop operation, known as the drag data store, consists of the following information:
A drag data store item list, which is a list of items representing the dragged data, each consisting of the following information:
The kind of data:
Text.
Binary data with a file name.
A Unicode string giving the type or format of the data, generally given by a MIME type. Some values that are not MIME types are special-cased for legacy reasons. The API does not enforce the use of MIME types; other values can be used as well. In all cases, however, the values are all converted to ASCII lowercase by the API.
Strings that contain space characters cannot be used with the dropzone
attribute, so authors are
encouraged to use only MIME types
or custom strings (without spaces).
There is a limit of one Plain Unicode string item per item type string.
A Unicode or binary string, in some cases with a file name (itself a Unicode string), as per the drag data item kind.
The drag data store item list is ordered in the order that the items were added to the list; most recently added last.
The following information, used to generate the UI feedback during the drag:
A drag data store mode, which is one of the following:
For the dragstart
event.
New data can be added to the drag data store.
For the drop
event. The list of
items representing dragged data can be read, including the data.
No new data can be added.
For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.
A drag data store allowed effects state, which is a string.
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
".
DataTransfer
interfaceDataTransfer
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;
};
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
".
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
",
items
Returns a DataTransferItems
object, with the drag data.
setDragImage
(element, x, y)Uses the given element to update the drag feedback, replacing any previously specified feedback.
addElement
(element)Adds the given element to the list of elements used to render the drag feedback.
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
".
getData
(format)Returns the specified data. If there is no such data, returns the empty string.
setData
(format, data)Adds the specified data.
clearData
( [ format ] )Removes the data of the specified formats. Removes all data if the argument is omitted.
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.
DataTransferItems
interfaceEach 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);
};
length
Returns the number of items in the drag data store.
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.
clear
()Removes all the entries in the drag data store.
add
(data)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.
DataTransferItem
interfaceEach 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); };
kind
Returns the drag data item kind, one of: "string", "file".
type
Returns the drag data item type string.
getAsString
(callback)Invokes the callback with the string data as the argument, if the drag data item kind is Plain Unicode string.
getAsFile
()Returns a File
object, if the drag data item kind is File.
DragEvent
interfaceThe 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);
};
dataTransfer
Returns the DataTransfer
object for the event.
This section is non-normative.
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.
draggable
attributeAll 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.
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.
dropzone
attributeAll 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.
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.
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.
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>
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.)
queryCommandEnabled
(commandId)Returns whether the given command is enabled, as described in the list below.
queryCommandIndeterm
(commandId)Returns whether the given command is indeterminate, as described in the list below.
queryCommandState
(commandId)Returns the state of the command, as described in the list below.
queryCommandSupported
(commandId)Returns true if the command is supported; otherwise, returns false.
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
b
element. False otherwise.true
"
if the expression given for the "State" above is true, the string
"false
" otherwise.createLink
false
".delete
false
".formatBlock
formatBlock
candidate, does nothing.false
".forwardDelete
false
".insertImage
false
".insertHTML
false
".insertLineBreak
false
".insertOrderedList
false
".insertUnorderedList
false
".insertParagraph
false
".insertText
false
".italic
i
element. False otherwise.true
"
if the expression given for the "State" above is true, the string
"false
" otherwise.redo
false
".selectAll
false
".subscript
sub
element. False otherwise.true
"
if the expression given for the "State" above is true, the string
"false
" otherwise.superscript
sup
element. False otherwise.true
"
if the expression given for the "State" above is true, the string
"false
" otherwise.undo
false
".unlink
a
element that has an href
attribute.false
".unselect
false
".