[html5] r5647 - [giow] (0) dropzone 2/5 and 3/5: Update the spec to use the new DND model. In th [...]
whatwg at whatwg.org
whatwg at whatwg.org
Wed Oct 27 16:01:55 PDT 2010
Author: ianh
Date: 2010-10-27 16:01:54 -0700 (Wed, 27 Oct 2010)
New Revision: 5647
Modified:
complete.html
index
source
Log:
[giow] (0) dropzone 2/5 and 3/5: Update the spec to use the new DND model. In theory, this makes no normative difference, but I'm sure I made some mistakes... let me know if you spot any.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10712
Modified: complete.html
===================================================================
--- complete.html 2010-10-25 22:32:13 UTC (rev 5646)
+++ complete.html 2010-10-27 23:01:54 UTC (rev 5647)
@@ -214,7 +214,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1>Web Applications 1.0</h1>
- <h2 class="no-num no-toc">Draft Standard — 25 October 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 27 October 2010</h2>
</hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -958,16 +958,18 @@
<li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
<ol>
<li><a href=#introduction-7><span class=secno>8.7.1 </span>Introduction</a></li>
- <li><a href=#the-dragevent-and-datatransfer-interfaces><span class=secno>8.7.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li>
- <li><a href=#dndevents><span class=secno>8.7.3 </span>Events fired during a drag-and-drop action</a></li>
- <li><a href=#drag-and-drop-processing-model><span class=secno>8.7.4 </span>Drag-and-drop processing model</a>
+ <li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
+ <li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a></li>
+ <li><a href=#the-dragevent-interface><span class=secno>8.7.4 </span>The <code>DragEvent</code> interface</a></li>
+ <li><a href=#drag-and-drop-processing-model><span class=secno>8.7.5 </span>Drag-and-drop processing model</a>
<ol>
- <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.7.4.1 </span>When the drag-and-drop operation starts or ends in another
+ <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.7.5.1 </span>When the drag-and-drop operation starts or ends in another
document</a></li>
- <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.7.4.2 </span>When the drag-and-drop operation starts or ends in another
+ <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.7.5.2 </span>When the drag-and-drop operation starts or ends in another
application</a></ol></li>
- <li><a href=#the-draggable-attribute><span class=secno>8.7.5 </span>The <code>draggable</code> attribute</a></li>
- <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.7.6 </span>Security risks in the drag-and-drop model</a></ol></li>
+ <li><a href=#dndevents><span class=secno>8.7.6 </span>Events summary</a></li>
+ <li><a href=#the-draggable-attribute><span class=secno>8.7.7 </span>The <code>draggable</code> attribute</a></li>
+ <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.7.8 </span>Security risks in the drag-and-drop model</a></ol></li>
<li><a href=#undo><span class=secno>8.8 </span>Undo history</a>
<ol>
<li><a href=#definitions-2><span class=secno>8.8.1 </span>Definitions</a></li>
@@ -65931,138 +65933,150 @@
+ <h4 id=the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</h4>
- <h4 id=the-dragevent-and-datatransfer-interfaces><span class=secno>8.7.2 </span>The <code><a href=#dragevent>DragEvent</a></code> and <code><a href=#datatransfer>DataTransfer</a></code> interfaces</h4>
+ <p>The data that underlies a drag-and-drop operation, known as the
+ <dfn id=drag-data-store>drag data store</dfn>, consists of the following information:</p>
- <p>The drag-and-drop processing model involves several events. They
- all use the <code><a href=#dragevent>DragEvent</a></code> interface.</p>
+ <ul><li><p>A <dfn id=drag-data-store-item-list>drag data store item list</dfn>, which is a list of
+ items representing the dragged data, each consisting of the
+ following information:</p>
- <pre class=idl>interface <dfn id=dragevent>DragEvent</dfn> : <span>MouseEvent</span> {
- readonly attribute <a href=#datatransfer>DataTransfer</a> <a href=#dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer>dataTransfer</a>;
+ <dl><dt><dfn id=the-drag-data-item-type-string>The drag data item type string</dfn></dt>
- void <a href=#dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent>initDragEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg<!-- used to be viewArg, back when we had views -->, 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 <a href=#datatransfer>DataTransfer</a> dataTransferArg);
-};</pre>
+ <dd>
- <dl class=domintro><dt><var title="">event</var> . <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code></dt>
+ <p>A Unicode string giving the type or format of the data,
+ generally given by a <a href=#mime-type>MIME type</a>. Some values that
+ are not <a href=#mime-type title="MIME type">MIME types</a> are
+ special-cased for legacy reasons. The API does not enforce the
+ use of <a href=#mime-type title="MIME type">MIME types</a>; other values
+ can be used as well. In all cases, however, the values are all
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> by the API.</p>
- <dd>
+ </dd>
- <p>Returns the <code><a href=#datatransfer>DataTransfer</a></code> object for the event.</p>
+ <dt><dfn id=the-drag-data-item-kind>The drag data item kind</dfn></dt>
- </dd>
+ <dd>
- </dl><div class=impl>
+ <p>The kind of data:</p>
- <p>The <dfn id=dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent><code>initDragEvent()</code></dfn>
- method must initialize the event in a manner analogous to the
- similarly-named method in the DOM Events interfaces, except that the
- <var title="">dummyArg</var> argument must be ignored. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
+ <dl><dt><i>Plain Unicode string</i></dt>
+ <dd>
+ <p>Raw text.</p>
+ </dd>
- <p>The <dfn id=dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer><code>dataTransfer</code></dfn>
- attribute of the <code><a href=#dragevent>DragEvent</a></code> interface represents the
- context information for the event.</p>
+ <dt><i>Blob</i></dt>
+ <dd>
+ <p>Binary data.</p>
+ </dd>
- </div>
+ <dt><i>File</i></dt>
+ <dd>
+ <p>Binary data with a file name.</p>
+ </dd>
- <pre class=idl>interface <dfn id=datatransfer>DataTransfer</dfn> {
- attribute DOMString <a href=#dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect>dropEffect</a>;
- attribute DOMString <a href=#dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed>effectAllowed</a>;
+ </dl></dd>
- readonly attribute DOMStringList <a href=#dom-datatransfer-types title=dom-DataTransfer-types>types</a>;
- void <a href=#dom-datatransfer-cleardata title=dom-DataTransfer-clearData>clearData</a>(in optional DOMString format);
- void <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>setData</a>(in DOMString format, in DOMString data);
- DOMString <a href=#dom-datatransfer-getdata title=dom-DataTransfer-getData>getData</a>(in DOMString format);
- readonly attribute <span>FileList</span> <a href=#dom-datatransfer-files title=dom-DataTransfer-files>files</a>;
+ <dt>The actual data</dt>
- void <a href=#dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage>setDragImage</a>(in Element image, in long x, in long y);
- void <a href=#dom-datatransfer-addelement title=dom-DataTransfer-addElement>addElement</a>(in Element element);
-};</pre>
+ <dd><p>A Unicode or binary string, optionally with a file name
+ (itself a Unicode string), as per <a href=#the-drag-data-item-kind>the drag data item
+ kind</a>.</dd>
- <p><code><a href=#datatransfer>DataTransfer</a></code> objects are used to expose the data
- that underlies a drag-and-drop operation.</p>
+ </dl></li>
- <p>The data that underlies a drag-and-drop operation, known as the
- <dfn id=drag-data-store>drag data store</dfn>, consists of an unordered list of items
- representing the dragged data, and some information used to generate
- the UI feedback during the drag.</p>
+ <li>
- <p>Each item representing dragged data in a <a href=#drag-data-store>drag data
- store</a> has the following information:</p>
+ <p>The following information, used to generate the UI feedback
+ during the drag:</p>
- <ul><li>
+ <ul><li>User-agent-defined default feedback information, known as the
+ <dfn id=drag-data-store-default-feedback>drag data store default feedback</dfn>.</li>
- <p>The type or format of the data, generally given by a <a href=#mime-type>MIME
- type</a>. Some values that are not <a href=#mime-type title="MIME type">MIME
- types</a> are special-cased for legacy reasons. The API does
- not enforce the use of <a href=#mime-type title="MIME type">MIME types</a>;
- other values can be used as well. In all cases, however, the
- values are all <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> by the
- API.</p>
+ <li>A list of zero or more elements known as the <dfn id=drag-data-store-elements-list>drag data
+ store elements list</dfn>.</li>
- </li>
+ <li>Optionally, a bitmap image and the coordinate of a point
+ within that image, known as the <dfn id=drag-data-store-bitmap>drag data store bitmap</dfn>
+ and <dfn id=drag-data-store-hot-spot-coordinate>drag data store hot spot coordinate</dfn>.</li>
+ </ul></li>
+
<li>
- <p>The kind of data:</p>
+ <p>A <dfn id=drag-data-store-mode>drag data store mode</dfn>, which is one of the
+ following:</p>
- <dl><dt>Plain Unicode string</dt>
+ <dl><dt><dfn id=concept-dnd-rw title=concept-dnd-rw>Read/write mode</dfn></dt>
<dd>
- <p>Raw text.</p>
+
+ <p>For the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event.
+ New data can be added to the <a href=#drag-data-store>drag data store</a>.</p>
+
</dd>
- <dt>Blob</dt>
+ <dt><dfn id=concept-dnd-ro title=concept-dnd-ro>Read-only mode</dfn></dt>
<dd>
- <p>Binary data.</p>
+
+ <p>For the <code title=event-drop><a href=#event-drop>drop</a></code> event. The list of
+ items representing dragged data can be read, including the data.
+ No new data can be added.</p>
+
</dd>
- <dt>File</dt>
+ <dt><dfn id=concept-dnd-p title=concept-dnd-p>Protected mode</dfn></dt>
<dd>
- <p>Binary data with a file name.</p>
+
+ <p>For all other events. The formats and kinds in the <a href=#drag-data-store>drag
+ data store</a> list of items representing dragged data can be
+ enumerated, but the data itself is unavailable and no new data can
+ be added.</p>
+
</dd>
</dl></li>
- </ul><p>The information in a <a href=#drag-data-store>drag data store</a> used to
- generate the UI feedback during the drag consists of:</p>
+ <li>
- <ul><li>A list of zero or more elements.</li>
+ <p>A <dfn id=drag-data-store-allowed-effects-state>drag data store allowed effects state</dfn>, which is a
+ string.</p>
- <li>Optionally, a bitmap image and the coordinate of a point within
- that image.</li>
+ </li>
- </ul><p>A <a href=#drag-data-store>drag data store</a> is created at the start of a
- drag-and-drop operation in the <i>read/write mode</i>, and then
- progresses through the following three modes as the operation
- proceeds:</p>
+ </ul><p>When a <a href=#drag-data-store>drag data store</a> is <dfn id=create-a-drag-data-store title="create a drag
+ data store">created</dfn>, it must be initialized such that its
+ <a href=#drag-data-store-item-list>drag data store item list</a> is empty, it has no
+ <a href=#drag-data-store-default-feedback>drag data store default feedback</a>, its <a href=#drag-data-store-elements-list>drag data
+ store elements list</a> is empty, it has no <a href=#drag-data-store-bitmap>drag data store
+ bitmap</a> / <a href=#drag-data-store-hot-spot-coordinate>drag data store hot spot coordinate</a>,
+ its <a href=#drag-data-store-mode>drag data store mode</a> is <a href=#concept-dnd-p title=concept-dnd-p>protected mode</a>, and its <a href=#drag-data-store-allowed-effects-state>drag data
+ store allowed effects state</a> is the string "<code title="">uninitialized</code>".</p>
- <dl><dt>Read/write mode</dt>
- <dd>
- <p>At the start of the drag. New data can be added to the
- <a href=#drag-data-store>drag data store</a>.</p>
+ <h4 id=the-datatransfer-interface><span class=secno>8.7.3 </span>The <code><a href=#datatransfer>DataTransfer</a></code> interface</h4>
- </dd>
+ <p><code><a href=#datatransfer>DataTransfer</a></code> objects are used to expose the
+ <a href=#drag-data-store>drag data store</a> that underlies a drag-and-drop
+ operation.</p>
- <dt>Protected mode</dt>
- <dd>
+ <pre class=idl>interface <dfn id=datatransfer>DataTransfer</dfn> {
+ attribute DOMString <a href=#dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect>dropEffect</a>;
+ attribute DOMString <a href=#dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed>effectAllowed</a>;
- <p>During the drag. The formats and kinds in the <a href=#drag-data-store>drag data
- store</a> list of items representing dragged data can be
- enumerated, but the data itself is unavailable and no new data can
- be added.</p>
+ readonly attribute DOMStringList <a href=#dom-datatransfer-types title=dom-DataTransfer-types>types</a>;
+ void <a href=#dom-datatransfer-cleardata title=dom-DataTransfer-clearData>clearData</a>(in optional DOMString format);
+ void <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>setData</a>(in DOMString format, in DOMString data);
+ DOMString <a href=#dom-datatransfer-getdata title=dom-DataTransfer-getData>getData</a>(in DOMString format);
+ readonly attribute <span>FileList</span> <a href=#dom-datatransfer-files title=dom-DataTransfer-files>files</a>;
- </dd>
+ void <a href=#dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage>setDragImage</a>(in Element image, in long x, in long y);
+ void <a href=#dom-datatransfer-addelement title=dom-DataTransfer-addElement>addElement</a>(in Element element);
+};</pre>
- <dt>Read-only mode</dt>
- <dd>
+ <dl class=domintro><dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> [ = <var title="">value</var> ]</dt>
- <p>After the drop. The list of items representing dragged data can
- be read, including the data. No new data can be added.</p>
-
- </dd>
-
- </dl><dl class=domintro><dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> [ = <var title="">value</var> ]</dt>
-
<dd>
<p>Returns the kind of operation that is currently selected. If
@@ -66072,7 +66086,7 @@
<p>Can be set, to change the selected operation.</p>
- <p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>.</p>
+ <p>The possible values are "<code title="">none</code>", "<code title="">copy</code>", "<code title="">link</code>", and "<code title="">move</code>".</p>
</dd>
@@ -66084,7 +66098,7 @@
<p>Can be set, to change the allowed operations.</p>
- <p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>,</p>
+ <p>The possible values are "<code title="">none</code>", "<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", "<code title="">link</code>", "<code title="">linkMove</code>", "<code title="">move</code>", "<code title="">all</code>", and "<code title="">uninitialized</code>",</p>
</dd>
@@ -66148,356 +66162,522 @@
</dd>
- </dl><!--
+ </dl><p><code><a href=#datatransfer>DataTransfer</a></code> objects are used during the <a href=#dndevents>drag-and-drop events</a>, and are only valid while
+ those events are being dispatched.</p>
+<!--
+
XXX
plan:
- 2. replace the existing API definitions with links to this model
- 3. make it clear there's a new DataTransfer object with each event
4. expose model with new API
5. add dropzone="..." feature
---><div class=impl>
+-->
- <p>When a <code><a href=#datatransfer>DataTransfer</a></code> object is created, it must be
- initialized as follows:</p>
+ <div class=impl>
- <ul><li>The <code><a href=#datatransfer>DataTransfer</a></code> object must initially contain no
- data, no elements, and have no associated image.</li>
+ <p>A <code><a href=#datatransfer>DataTransfer</a></code> object is associated with a
+ <code><a href=#drag-data-store>drag data store</a></code> while it is valid.</p>
- <li>The <code><a href=#datatransfer>DataTransfer</a></code> object's <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
- attribute must be set to "<code title="">uninitialized</code>".</li>
-
- <li>The <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
- attribute must be set to "<code title="">none</code>".</li>
-
- </ul><p>The <dfn id=dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect><code>dropEffect</code></dfn>
+ <p>The <dfn id=dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect><code>dropEffect</code></dfn>
attribute controls the drag-and-drop feedback that the user is given
- during a drag-and-drop operation.</p>
+ during a drag-and-drop operation. When the <code><a href=#datatransfer>DataTransfer</a></code>
+ object is created, the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute is
+ set to a string value. On getting, it must return its current value.
+ On setting, if the new value is one of "<code title="">none</code>",
+ "<code title="">copy</code>", "<code title="">link</code>", or
+ "<code title="">move</code>", then the attribute's current value
+ must be set to the new value. Other values must be ignored.</p>
- <p>The attribute must ignore any attempts to set it to a value other
- than <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>. On getting,
- the attribute must return the last of those four values that it was
- set to.</p>
-
<p>The <dfn id=dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed><code>effectAllowed</code></dfn>
attribute is used in the drag-and-drop processing model to
initialize the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
- during the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code> events.</p>
+ during the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code> events. When the
+ <code><a href=#datatransfer>DataTransfer</a></code> object is created, the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute is set to a string value. On getting, it must return its
+ current value. On setting, if the new value is one of "<code title="">none</code>", "<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", "<code title="">link</code>", "<code title="">linkMove</code>", "<code title="">move</code>", "<code title="">all</code>", or "<code title="">uninitialized</code>", then the attribute's current value
+ must be set to the new value. Other values must be ignored.</p>
- <p>The attribute must ignore any attempts to set it to a value other
- than <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>. On getting, the attribute must return
- the last of those values that it was set to.</p>
-
<p>The <dfn id=dom-datatransfer-types title=dom-DataTransfer-types><code>types</code></dfn>
attribute must return a <a href=#live>live</a> <code>DOMStringList</code>
- that contains the list of formats that were added to the
- <code><a href=#datatransfer>DataTransfer</a></code> object in the corresponding <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event. The same object must
- be returned each time. If any files were included in the drag, then
- the <code>DOMStringList</code> object must in addition include the
- string "<code title="">Files</code>". (This value can be
- distinguished from the other values because it is not
- lowercase.)</p>
+ giving the strings that the following steps would produce. The same
+ object must be returned each time.</p>
- <p>The <dfn id=dom-datatransfer-cleardata title=dom-DataTransfer-clearData><code>clearData()</code></dfn>
- method, when called with no arguments, must clear the
- <code><a href=#datatransfer>DataTransfer</a></code> object of all data (for all formats).</p>
+ <ol><li><p>Start with an empty list <var title="">L</var>.</li>
- <p class=note>The <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> method does
+ <li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, the
+ <code>DOMStringList</code> is empty. Abort these steps; return the
+ empty list <var title="">L</var>.</li>
+
+ <li><p>For each item in the <a href=#drag-data-store-item-list>drag data store item list</a>
+ <!-- in some order...? --> whose <a href=#the-drag-data-item-kind title="the drag data item
+ kind">kind</a> is <i>Plain Unicode string</i>, add an entry to
+ the list <var title="">L</var> consisting of the item's <a href=#the-drag-data-item-type-string title="the drag data item type string">type string</a>.</li>
+
+ <li><p>If there are any items in the <a href=#drag-data-store-item-list>drag data store item
+ list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a>
+ is <i>File</i>, then add an entry to the list <var title="">L</var>
+ consisting of the string "<code title="">Files</code>". (This value
+ can be distinguished from the other values because it is not
+ lowercase.)</li>
+
+ <!-- <li><p>Sort the list...?</p></li> -->
+
+ <li><p>The strings produced by these steps are those in the list
+ <var title="">L</var>.</li>
+
+ </ol><p>The <dfn id=dom-datatransfer-cleardata title=dom-DataTransfer-clearData><code>clearData()</code></dfn>
+ method must run the following steps:</p>
+
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is not the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write mode</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the method was called with no arguments, remove each item
+ in the <a href=#drag-data-store-item-list>drag data store item list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a> is <i>Plain Unicode
+ string</i>, and abort these steps.</li>
+
+ <li><p>Let <var title="">format</var> be the first argument,
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
+
+ <li>
+
+ <p>If <var title="">format</var> equals "<code title="">text</code>", change it to "<code title="">text/plain</code>".</p>
+
+ <p>If <var title="">format</var> equals "<code title="">url</code>", change it to "<code title="">text/uri-list</code>".</p>
+
+ </li>
+
+ <li><p>Remove each item in the <a href=#drag-data-store-item-list>drag data store item
+ list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a>
+ is <i>Plain Unicode string</i> and whose <a href=#the-drag-data-item-type-string title="the drag data
+ item type string">type string</a> is equal to <var title="">format</var>.</li>
+
+ </ol><p class=note>The <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> method does
not affect whether any files were included in the drag, so the <code title=dom-DataTransfer-types><a href=#dom-datatransfer-types>types</a></code> attribute's list might
still not be empty after calling <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> (it would
still contain the "<code title="">Files</code>" string if any files
were included in the drag).</p>
- <p>When called with an argument, the <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData(<var title="">format</var>)</a></code> method must clear the
- <code><a href=#datatransfer>DataTransfer</a></code> object of any data associated with the
- given <var title="">format</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII
- lowercase</a>. If <var title="">format</var> (after conversion to
- lowercase) is the value "<code title="">text</code>", then it must
- be treated as "<code title="">text/plain</code>". If the <var title="">format</var> (after conversion to lowercase) is "<code title="">url</code>", then it must be treated as "<code title="">text/uri-list</code>".</p>
-
<p>The <dfn id=dom-datatransfer-setdata title=dom-DataTransfer-setData><code>setData(<var title="">format</var>, <var title="">data</var>)</code></dfn> method
- must add <var title="">data</var> to the data stored in the
- <code><a href=#datatransfer>DataTransfer</a></code> object, labeled as being of the type <var title="">format</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII
- lowercase</a>. This must replace any previous data that had been
- set for that format. If <var title="">format</var> (after conversion
- to lowercase) is the value "<code title="">text</code>", then it
- must be treated as "<code title="">text/plain</code>". If the <var title="">format</var> (after conversion to lowercase) is "<code title="">url</code>", then it must be treated as "<code title="">text/uri-list</code>".</p>
+ must run the following steps:</p>
- <p>The <dfn id=dom-datatransfer-getdata title=dom-DataTransfer-getData><code>getData(<var title="">format</var>)</code></dfn> method must return the data that
- is associated with the type <var title="">format</var>
- <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>, if any, and must return
- the empty string otherwise. If <var title="">format</var> (after
- conversion to lowercase) is the value "<code title="">text</code>",
- then it must be treated as "<code title="">text/plain</code>". If
- the <var title="">format</var> (after conversion to lowercase) is
- "<code title="">url</code>", then the data associated with the
- "<code title="">text/uri-list</code>" format must be parsed as
- appropriate for <code title="">text/uri-list</code> data, and the
- first URL from the list must be returned. If there is no data with
- that format, or if there is but it has no URLs, then the method must
- return the empty string. <a href=#refsRFC2483>[RFC2483]</a></p>
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
- <p>The <dfn id=dom-datatransfer-files title=dom-DataTransfer-files><code>files</code></dfn>
- attribute must return the <code>FileList</code> object that contains
- the files that are stored in the <code><a href=#datatransfer>DataTransfer</a></code>
- object. There is one such object per <code><a href=#datatransfer>DataTransfer</a></code>
- object.</p>
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is not the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write mode</a>, abort these steps.
+ Nothing happens.</li>
- <p class=note>This version of the API does not expose the types of
+ <li><p>Let <var title="">format</var> be the first argument,
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
+
+ <li>
+
+ <p>If <var title="">format</var> equals "<code title="">text</code>", change it to "<code title="">text/plain</code>".</p>
+
+ <p>If <var title="">format</var> equals "<code title="">url</code>", change it to "<code title="">text/uri-list</code>".</p>
+
+ </li>
+
+ <li><p>Remove each item in the <a href=#drag-data-store-item-list>drag data store item
+ list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a>
+ is <i>Plain Unicode string</i> and whose <a href=#the-drag-data-item-type-string title="the drag data
+ item type string">type string</a> is equal to <var title="">format</var>.</li>
+
+ <li><p>Add an item to the <a href=#drag-data-store-item-list>drag data store item list</a>
+ whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a> is <i>Plain
+ Unicode string</i>, whose <a href=#the-drag-data-item-type-string title="the drag data item type
+ string">type string</a> is equal to <var title="">format</var>,
+ and whose data is the string given by the method's second
+ argument.</li>
+
+ </ol><p>The <dfn id=dom-datatransfer-getdata title=dom-DataTransfer-getData><code>getData(<var title="">format</var>, <var title="">data</var>)</code></dfn> method
+ must run the following steps:</p>
+
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is in the <a href=#concept-dnd-p title=concept-dnd-p>protected mode</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>Let <var title="">format</var> be the first argument,
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
+
+ <li><p>Let <var title="">convert-to-URL</var> be false.</li>
+
+ <li><p>If <var title="">format</var> equals "<code title="">text</code>", change it to "<code title="">text/plain</code>".</li>
+
+ <li><p>If <var title="">format</var> equals "<code title="">url</code>", change it to "<code title="">text/uri-list</code>" and set <var title="">convert-to-URL</var> to true.</li>
+
+ <li><p>If there is no item in the <a href=#drag-data-store-item-list>drag data store item
+ list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a>
+ is <i>Plain Unicode string</i> and whose <a href=#the-drag-data-item-type-string title="the drag data
+ item type string">type string</a> is equal to <var title="">format</var>, return the empty string and abort these
+ steps.</li>
+
+ <li><p>Let <var title="">result</var> be the data of the first item
+ to the <a href=#drag-data-store-item-list>drag data store item list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a> is <i>Plain Unicode
+ string</i> and whose <a href=#the-drag-data-item-type-string title="the drag data item type
+ string">type string</a> is equal to <var title="">format</var>.</li>
+
+ <li><p>If <var title="">convert-to-URL</var> is true, then parse
+ <var title="">result</var> as appropriate for <code title="">text/uri-list</code> data, and then set <var title="">result</var> to the first URL from the list, if any, or
+ the empty string otherwise. <a href=#refsRFC2483>[RFC2483]</a></li>
+
+ <li><p>Return <var title="">result</var>.</li>
+
+ </ol><p>The <dfn id=dom-datatransfer-files title=dom-DataTransfer-files><code>files</code></dfn>
+ attribute must return a <a href=#live>live</a> <code>FileList</code>
+ sequence consisting of <code>File</code> objects representing the
+ files found by the following steps. The same object must be returned
+ each time. Furthermore, for a given <code>FileList</code> object and
+ a given underlying file, the same <code>File</code> object must be
+ used each time.</p>
+
+ <ol><li><p>Start with an empty list <var title="">L</var>.</li>
+
+ <li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, the
+ <code>FileList</code> is empty. Abort these steps; return the
+ empty list <var title="">L</var>.</li>
+
+ <li><p>For each item in the <a href=#drag-data-store-item-list>drag data store item list</a>
+ <!-- in some order...? --> whose <a href=#the-drag-data-item-kind title="the drag data item
+ kind">kind</a> is <i>File</i> (not <i>Blob</i>), add the item's
+ data (the file, in particular its name and contents, as well as its
+ <a href=#the-drag-data-item-type-string title="the drag data item type string">type</a>) to the
+ list <var title="">L</var>.</li>
+
+ <!-- <li><p>Sort the list...?</p></li> -->
+
+ <li><p>The files found by these steps are those in the list <var title="">L</var>.</li>
+
+ </ol><p class=note>This version of the API does not expose the types of
the files during the drag.</p>
- <p>The <dfn id=dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage><code>setDragImage(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method sets which element to use <a href=#base-dnd-feedback>to generate the drag feedback</a>. The
- <var title="">element</var> argument can be any
- <code><a href=#element>Element</a></code>; if it is an <code><a href=#the-img-element>img</a></code> element, then the
- user agent should use the element's image (at its intrinsic size) to
- generate the feedback, otherwise the user agent should base the
- feedback on the given element (but the exact mechanism for doing so
- is not specified).</p>
+ <p>The <dfn id=dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage><code>setDragImage(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method must run the following
+ steps:</p>
- <p>The <dfn id=dom-datatransfer-addelement title=dom-DataTransfer-addElement><code>addElement(<var title="">element</var>)</code></dfn> method is an alternative way of
- specifying how the user agent is to <a href=#base-dnd-feedback>render the drag feedback</a>. It adds an
- element to the <code><a href=#datatransfer>DataTransfer</a></code> object.</p>
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
- <p class=note>The difference between <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> and
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is not in the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write mode</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the <var title="">element</var> argument is an
+ <code><a href=#the-img-element>img</a></code> element, then set the <a href=#drag-data-store-bitmap>drag data store
+ bitmap</a> to the element's image (at its intrinsic size);
+ otherwise, set the <a href=#drag-data-store-bitmap>drag data store bitmap</a> to an image
+ generated from the given element (the exact mechanism for doing so
+ is not currently specified).</li>
+
+ <li><p>Set the <span>drag data store hot spot</span> to the given
+ <var title="">x</var>, <var title="">y</var> coordinate.</li>
+
+ </ol><p>The <dfn id=dom-datatransfer-addelement title=dom-DataTransfer-addElement><code>addElement(<var title="">element</var>)</code></dfn> method is an alternative way of
+ specifying how the user agent is to <a href=#base-dnd-feedback>render the drag feedback</a>. The method
+ must run the following steps:</p>
+
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is not in the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write mode</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>Add the given <var title="">element</var> to the element's
+ <a href=#drag-data-store-elements-list>drag data store elements list</a>.</li>
+
+ </ol><p class=note>The difference between <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> and
<code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> is
that the latter automatically generates the image based on the
- current rendering of the elements added, whereas the former uses the
- exact specified image.</p>
+ current rendering of the elements added (potentially keeping it
+ updated as the drag continues, e.g. if the elements include an
+ actively playing video), whereas the former uses the exact specified
+ image at the time the method is invoked.</p>
</div>
- <h4 id=dndevents><span class=secno>8.7.3 </span>Events fired during a drag-and-drop action</h4>
- <p>The following events are involved in the drag-and-drop
- model.</p>
+ <h4 id=the-dragevent-interface><span class=secno>8.7.4 </span>The <code><a href=#dragevent>DragEvent</a></code> interface</h4>
- <div class=impl>
+ <p>The drag-and-drop processing model involves several events. They
+ all use the <code><a href=#dragevent>DragEvent</a></code> interface.</p>
- <p>Whenever the processing model described below causes one of these
- events to be fired, the event fired must use the
- <code><a href=#dragevent>DragEvent</a></code> interface defined above, must have the
- bubbling and cancelable behaviors given in the table below, and must
- have the context information set up as described after the table,
- with the <code title=dom-UIEvent-detail>detail</code> attribute
- set to zero, the mouse and key attributes set according to the state
- of the input devices as they would be for user interaction events,
- and the <code title="">relatedTarget</code> attribute set to
- null.</p>
+ <pre class=idl>interface <dfn id=dragevent>DragEvent</dfn> : <span>MouseEvent</span> {
+ readonly attribute <a href=#datatransfer>DataTransfer</a> <a href=#dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer>dataTransfer</a>;
- <p>If there is no relevant pointing device, the object must have its
- <code title="">screenX</code>, <code title="">screenY</code>, <code title="">clientX</code>, <code title="">clientY</code>, and <code title="">button</code> attributes set to 0.</p>
+ void <a href=#dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent>initDragEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg<!-- used to be viewArg, back when we had views -->, 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 <a href=#datatransfer>DataTransfer</a> dataTransferArg);
+};</pre>
- <!-- interaction event spec point -->
+ <dl class=domintro><dt><var title="">event</var> . <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code></dt>
+ <dd>
+
+ <p>Returns the <code><a href=#datatransfer>DataTransfer</a></code> object for the event.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent><code>initDragEvent()</code></dfn>
+ method must initialize the event in a manner analogous to the
+ similarly-named method in the DOM Events interfaces, except that the
+ <var title="">dummyArg</var> argument must be ignored. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
+
+ <p>The <dfn id=dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer><code>dataTransfer</code></dfn>
+ attribute of the <code><a href=#dragevent>DragEvent</a></code> interface represents the
+ context information for the event.</p>
+
</div>
- <table><thead><tr><th> Event Name </th>
- <th> Target </th>
- <th> Bubbles? </th>
- <th> Cancelable? </th>
- <th> <code title=dom-DataTransfer-dataTransfer>dataTransfer</code> </th>
- <th> <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> </th>
- <th> <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> </th>
- <th> Default Action </th>
- <tbody><tr><td><dfn id=event-dragstart title=event-dragstart><code>dragstart</code></dfn></td>
- <td><a href=#source-node>Source node</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Contains <a href=#source-node>source node</a> unless a selection is being dragged, in which case it is empty; <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> returns any files included in the drag operation</td>
- <td><code title="">uninitialized</code></td>
- <td><code title="">none</code></td>
- <td>Initiate the drag-and-drop operation</td>
- <tr><td><dfn id=event-drag title=event-drag><code>drag</code></dfn></td>
- <td><a href=#source-node>Source node</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><code title="">none</code></td>
- <td>Continue the drag-and-drop operation</td>
- <tr><td><dfn id=event-dragenter title=event-dragenter><code>dragenter</code></dfn></td>
- <td><a href=#immediate-user-selection>Immediate user selection</a> or <a href=#the-body-element>the body element</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
- <td>Reject <a href=#immediate-user-selection>immediate user selection</a> as potential <a href=#current-target-element title="current target element">target element</a></td>
- <tr><td><dfn id=event-dragleave title=event-dragleave><code>dragleave</code></dfn></td>
- <td><a href=#current-target-element title="current target element">Previous target element</a></td>
- <td>✓ Bubbles</td>
- <td>—</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><code title="">none</code></td>
- <td>None</td>
- <tr><td><dfn id=event-dragover title=event-dragover><code>dragover</code></dfn></td>
- <td><a href=#current-target-element>Current target element</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
- <td>Reset the <a href=#current-drag-operation>current drag operation</a> to "none"</td>
- <tr><td><dfn id=event-drop title=event-drop><code>drop</code></dfn></td>
- <td><a href=#current-target-element>Current target element</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td><code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> returns data set in <code title=dom-dragstart>dragstart</code> event; <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> returns any files included in the drag operation</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><a href=#current-drag-operation>Current drag operation</a></td>
- <td>Varies</td>
- <tr><td><dfn id=event-dragend title=event-dragend><code>dragend</code></dfn></td>
- <td><a href=#source-node>Source node</a></td>
- <td>✓ Bubbles</td>
- <td>—</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><a href=#current-drag-operation>Current drag operation</a></td>
- <td>Varies</td>
- </table><p class=note>"Empty" in the table above means that the <code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> and <code title=dom-dataTransfer-files><a href=#dom-datatransfer-files>files</a></code> attributes act as if
- there is no data being dragged.</p>
-
<div class=impl>
- <p>The <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
- object's contents are empty (the <code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> and <code title=dom-dataTransfer-files><a href=#dom-datatransfer-files>files</a></code> attributes act as if
- there is no data being dragged) except for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> events and <code title=event-drop><a href=#event-drop>drop</a></code> events, for which the contents are
- set as described in the processing model, below.</p>
+ <p>When a user agent is required to <dfn id=fire-a-dnd-event>fire a DND event</dfn>
+ named <var title="">e</var> at an element, using a particular
+ <a href=#drag-data-store>drag data store</a>, the user agent must run the following
+ steps:</p>
- <p id=effectAllowed-initialization>The <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
- attribute must be set to "<code title="">uninitialized</code>" for
- <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> events, and to
- whatever value the field had after the last drag-and-drop event was
- fired for all other events (only counting events fired by the user
- agent for the purposes of the drag-and-drop model described
- below).</p>
+ <ol><li>
- <p id=dropEffect-initialization>The <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute must
- be set to "<code title="">none</code>" for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>, <code title=event-drag><a href=#event-drag>drag</a></code>, and <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> events (except when stated
- otherwise in the algorithms given in the sections below), to the
- value corresponding to the <a href=#current-drag-operation>current drag operation</a> for
- <code title=event-drop><a href=#event-drop>drop</a></code> and <code title=event-dragend><a href=#event-dragend>dragend</a></code> events, and to a value based on
- the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
- attribute's value and to the drag-and-drop source, as given by the
- following table, for the remaining events (<code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code>):</p>
+ <p>If <var title="">e</var> is <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>, set the <a href=#drag-data-store-mode>drag data
+ store mode</a> to the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write
+ mode</a>.</p>
- <table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
- <th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
- </thead><tr><td><code title="">none</code></td>
- <td><code title="">none</code></td>
- <tr><td><code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">all</code></td>
- <td><code title="">copy</code></td>
- <tr><td><code title="">link</code>, <code title="">linkMove</code></td>
- <td><code title="">link</code></td>
- <tr><td><code title="">move</code></td>
- <td><code title="">move</code></td>
- <tr><td><code title="">uninitialized</code> when what is being dragged is a selection from a text field</td>
- <td><code title="">move</code></td>
- <tr><td><code title="">uninitialized</code> when what is being dragged is a selection</td>
- <td><code title="">copy</code></td>
- <tr><td><code title="">uninitialized</code> when what is being dragged is an <code><a href=#the-a-element>a</a></code> element with an <code>href</code> attribute</td>
- <td><code title="">link</code></td>
- <tr><td>Any other case</td>
- <td><code title="">copy</code></td>
- </table></div>
+ <p>If <var title="">e</var> is <code title=event-drop><a href=#event-drop>drop</a></code>, set the <a href=#drag-data-store-mode>drag data store
+ mode</a> to the <a href=#concept-dnd-ro title=concept-dnd-ro>read-only
+ mode</a>.</p>
+ </li>
+ <li><p>Let <var title="">dataTransfer</var> be a newly created
+ <code><a href=#datatransfer>DataTransfer</a></code> object associated with the given
+ <a href=#drag-data-store>drag data store</a>.</li>
+
+ <li><p id=effectAllowed-initialization>Set the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute to the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-allowed-effects-state>drag data
+ store allowed effects state</a>.</li>
+
+ <li>
+
+ <p id=dropEffect-initialization>Set the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute to
+ "<code title="">none</code>" if <var title="">e</var> is <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>, <code title=event-drag><a href=#event-drag>drag</a></code>, or <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code>; to the value
+ corresponding to the <a href=#current-drag-operation>current drag operation</a> if <var title="">e</var> is <code title=event-drop><a href=#event-drop>drop</a></code> or <code title=event-dragend><a href=#event-dragend>dragend</a></code>; and to a value based on the
+ <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute's value and to the drag-and-drop source, as given by the
+ following table, otherwise (i.e. if <var title="">e</var> is <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> or <code title=event-dragover><a href=#event-dragover>dragover</a></code>):</p>
+
+ <table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
+ <th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
+ </thead><tr><td>"<code title="">none</code>"</td>
+ <td>"<code title="">none</code>"</td>
+ <tr><td>"<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", "<code title="">all</code>"</td>
+ <td>"<code title="">copy</code>"</td>
+ <tr><td>"<code title="">link</code>", "<code title="">linkMove</code>"</td>
+ <td>"<code title="">link</code>"</td>
+ <tr><td>"<code title="">move</code>"</td>
+ <td>"<code title="">move</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>" when what is being dragged is a selection from a text field</td>
+ <td>"<code title="">move</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>" when what is being dragged is a selection</td>
+ <td>"<code title="">copy</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>" when what is being dragged is an <code><a href=#the-a-element>a</a></code> element with an <code>href</code> attribute</td>
+ <td>"<code title="">link</code>"</td>
+ <tr><td>Any other case</td>
+ <td>"<code title="">copy</code>"</td>
+ </table></li>
+
+ <li>
+
+ <p>Create a <code><a href=#dragevent>DragEvent</a></code> object and initialize it to
+ have the given name <var title="">e</var>, to bubble, to be
+ cancelable unless <var title="">e</var> is <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> or <code title=event-dragend><a href=#event-dragend>dragend</a></code>, and to have the <code title=dom-UIEvent-detail>detail</code> attribute set to zero,
+ the mouse and key attributes set according to the state of the
+ input devices as they would be for user interaction events, the
+ <code title="">relatedTarget</code> attribute set to null, and the
+ <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
+ attribute set to <var title="">dataTransfer</var>, the
+ <code><a href=#datatransfer>DataTransfer</a></code> object created above.</p>
+
+ <!-- interaction event spec point -->
+
+ <p>If there is no relevant pointing device, the object must have
+ its <code title="">screenX</code>, <code title="">screenY</code>,
+ <code title="">clientX</code>, <code title="">clientY</code>, and
+ <code title="">button</code> attributes set to 0.</p>
+
+ </li>
+
+ <li><p>Dispatch the newly created <code><a href=#dragevent>DragEvent</a></code> object at
+ the specified target element.</li>
+
+ <li><p>Set the <a href=#drag-data-store-allowed-effects-state>drag data store allowed effects state</a>
+ to the current value of <var title="">dataTransfer</var>'s <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute.</li>
+
+ <li><p>Set the <a href=#drag-data-store-mode>drag data store mode</a> back to the <a href=#concept-dnd-p title=concept-dnd-p>protected mode</a> if it was changed in
+ the first step.</li>
+
+ </ol></div>
+
+
<div class=impl>
- <h4 id=drag-and-drop-processing-model><span class=secno>8.7.4 </span>Drag-and-drop processing model</h4>
+ <h4 id=drag-and-drop-processing-model><span class=secno>8.7.5 </span>Drag-and-drop processing model</h4>
<p>When the user attempts to begin a drag operation, the user agent
- must first determine what is being dragged. If the drag operation
- was invoked on a selection, then it is the selection that is being
- dragged. Otherwise, it is the first element, going up the ancestor
- chain, starting at the node that the user tried to drag, that has
- the IDL attribute <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> set
- to true. If there is no such element, then nothing is being dragged,
- the drag-and-drop operation is never started, and the user agent
- must not continue with this algorithm.</p>
+ must run the following steps. User agents must act as if these steps
+ were run even if the drag actually started in another document or
+ application and the user agent was not aware that the drag was
+ occuring until it intersected with a document under the user agent's
+ purview.</p>
- <p class=note><code><a href=#the-img-element>img</a></code> elements and <code><a href=#the-a-element>a</a></code>
- elements with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
- attribute have their <code title=dom-draggable><a href=#dom-draggable>draggable</a></code>
- attribute set to true by default.</p>
+ <ol><li>
- <p>If the user agent determines that something can be dragged, a
- <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event must then be
- fired at the <a href=#source-node>source node</a>.</p>
+ <p>Determine what is being dragged, as follows:</p>
- <p>The <dfn id=source-node>source node</dfn> depends on the kind of drag and how it
- was initiated. If it is a selection that is being dragged, then the
- <a href=#source-node>source node</a> is the text node that the user started the
- drag on (typically the text node that the user originally
- clicked). If the user did not specify a particular node, for example
- if the user just told the user agent to begin a drag of "the
- selection", then the <a href=#source-node>source node</a> is the first text node
- containing a part of the selection. If it is not a selection that is
- being dragged, then the <a href=#source-node>source node</a> is the element that
- is being dragged.</p>
+ <p>If the drag operation was invoked on a selection, then it is
+ the selection that is being dragged.</p>
- <p>Multiple events are fired on the <a href=#source-node>source node</a> during
- the course of the drag-and-drop operation.</p>
+ <p>Otherwise, if the drag operation was invoked on a
+ <code><a href=#document>Document</a></code>, it is the first element, going up the
+ ancestor chain, starting at the node that the user tried to drag,
+ that has the IDL attribute <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> set to true. If there is no
+ such element, then nothing is being dragged; abort these steps,
+ the drag-and-drop operation is never started.</p>
- <hr><p>The <dfn id=list-of-dragged-nodes>list of dragged nodes</dfn> also depends on the kind of
- drag. If it is a selection that is being dragged, then the
- <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains, in <a href=#tree-order>tree
- order</a>, every node that is partially or completely included in
- the selection (including all their ancestors). Otherwise, the
- <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains only the <a href=#source-node>source
- node</a>.</p>
+ <p>Otherwise, the drag operation was invoked outside the user
+ agent's purview. What is being dragged is defined by the document
+ or application where the drag was started.</p>
- <hr><p>If it is a selection that is being dragged, the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member of the
- event must be created with no nodes. Otherwise, it must be created
- containing just the <a href=#source-node>source node</a>. Script can use the
- <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> method
- to add further elements to the list of what is being dragged. (This
- list is only used for rendering the drag feedback.)</p>
+ <p class=note><code><a href=#the-img-element>img</a></code> elements and <code><a href=#the-a-element>a</a></code>
+ elements with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
+ attribute have their <code title=dom-draggable><a href=#dom-draggable>draggable</a></code>
+ attribute set to true by default.</p>
- <p>The <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
- member of the event also has data added to it, as follows:</p>
+ </li>
- <ul><li>
+ <li><p><a href=#create-a-drag-data-store>Create a drag data store</a>. All the DND events
+ fired subsequently by this algorithm must use this <a href=#drag-data-store>drag data
+ store</a>.</li>
- <p>If it is a selection that is being dragged, then the user agent
- must add the text of the selection to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
- associated with the <code title="">text/plain</code> format.</p>
+ <li>
+ <p>Establish which DOM node is the <dfn id=source-node>source node</dfn>, as
+ follows:</p>
+
+ <p>If it is a selection that is being dragged, then the
+ <a href=#source-node>source node</a> is the text node that the user started
+ the drag on (typically the text node that the user originally
+ clicked). If the user did not specify a particular node, for
+ example if the user just told the user agent to begin a drag of
+ "the selection", then the <a href=#source-node>source node</a> is the first
+ text node containing a part of the selection.</p>
+
+ <p>Otherwise, if it is an element that is being dragged, then the
+ <a href=#source-node>source node</a> is the element that is being dragged.</p>
+
+ <p>Otherwise, the <a href=#source-node>source node</a> is part of another
+ document or application, and user agents must not actually fire
+ events at it when this algorithm requires that they do so.</p>
+
+ <p class=note>Multiple events are fired on the <a href=#source-node>source
+ node</a> during the course of the drag-and-drop operation.</p>
+
</li>
<li>
- <p>If files are being dragged, then the user agent must add the
- files to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member's
- <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> attribute's
- <code>FileList</code> object. (Dragging files can only happen from
+ <p>Determine the <dfn id=list-of-dragged-nodes>list of dragged nodes</dfn>, as follows:</p>
+
+ <p>If it is a selection that is being dragged, then the <a href=#list-of-dragged-nodes>list
+ of dragged nodes</a> contains, in <a href=#tree-order>tree order</a>,
+ every node that is partially or completely included in the
+ selection (including all their ancestors).</p>
+
+ <p>Otherwise, the <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains only
+ the <a href=#source-node>source node</a>, if any.</p>
+
+ </li>
+
+ <li>
+
+ <p>If it is a selection that is being dragged, then add an item to
+ the <a href=#drag-data-store-item-list>drag data store item list</a>, with its properties
+ set as follows:</p>
+
+ <dl><dt><a href=#the-drag-data-item-type-string>The drag data item type string</a>
+ <dd>"<code>text/plain</code>"</dd>
+
+ <dt><a href=#the-drag-data-item-kind>The drag data item kind</a>
+ <dd><i>Plain Unicode string</i></dd>
+
+ <dt>The actual data</dt>
+ <dd>The text of the selection</dd>
+
+ </dl><p>Otherwise, if any files are being dragged, then add one item
+ per file to the <a href=#drag-data-store-item-list>drag data store item list</a>, with their
+ properties set as follows:</p>
+
+ <dl><dt><a href=#the-drag-data-item-type-string>The drag data item type string</a>
+ <dd>The MIME type of the file, if known, or "<code>application/octet-stream</code>" otherwise.</dd>
+
+ <dt><a href=#the-drag-data-item-kind>The drag data item kind</a>
+ <dd><i>File</i></dd>
+
+ <dt>The actual data</dt>
+ <dd>The file's contents and name.</dd>
+
+ </dl><p class=note>Dragging files can currently only happen from
outside a <a href=#browsing-context>browsing context</a>, for example from a file
- system manager application, and thus the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event is actually implied
- in this case.)</p>
+ system manager application.</p>
</li>
+ <!-- v2: text/html as an export format -->
+
<!--MD-->
<li>
- <p>The user agent must take the <a href=#list-of-dragged-nodes>list of dragged nodes</a>
- and <a href=#extracting-json title="extracting JSON">extract the microdata from those
- nodes into a JSON form</a>, and then must add the resulting
- string to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
- associated with the <code title="">application/microdata+json</code> format.</p>
+ <p>If the <a href=#list-of-dragged-nodes>list of dragged nodes</a> is not empty, then
+ <a href=#extracting-json title="extracting JSON">extract the microdata from those
+ nodes into a JSON form</a>, and add one item to the <a href=#drag-data-store-item-list>drag
+ data store item list</a>, with its properties set as
+ follows:</p>
- </li>
+ <dl><dt><a href=#the-drag-data-item-type-string>The drag data item type string</a>
+ <dd><code><a href=#application/microdata+json>application/microdata+json</a></code></dd>
+ <dt><a href=#the-drag-data-item-kind>The drag data item kind</a>
+ <dd><i>Plain Unicode string</i></dd>
+ <dt>The actual data</dt>
+ <dd>The resulting JSON string.</dd>
+
+ </dl></li>
+
+
<!-- v2: deal with multiple vCards -->
<!--
<li>
+ (if you put this back, don't forget to update this text as above)
+
<p>The user agent must take the <span>list of dragged nodes</span>
and <span title="extracting a vCard">extract the vCard data from
those nodes</span>, and then must add the resulting string to the
@@ -66509,6 +66689,8 @@
<li>
+ (if you put this back, don't forget to update this text as above)
+
<p>The user agent must take the <span>list of dragged nodes</span>
and <span title="extracting vEvent data">extract the vEvent data
from those nodes</span>, and then must add the resulting string to
@@ -66519,11 +66701,9 @@
</li>
-->
- <!-- v2: text/html -->
-
<li>
- <p>The user agent must run the following steps:</p>
+ <p>Run the following substeps:</p>
<ol><li><p>Let <var title="">urls</var> be an empty list of <a href=#absolute-url title="absolute URL">absolute URLs</a>.</li>
@@ -66532,87 +66712,118 @@
<p>For each <var title="">node</var> in the <a href=#list-of-dragged-nodes>list of
dragged nodes</a>:</p>
- <dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dt>
+ <dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</dt>
- <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute relative to
- the element.</dd>
+ <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute
+ relative to the element.</dd>
- <dt>If the node is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-src><a href=#attr-img-src>src</a></code></dt>
+ <dt>If the node is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute</dt>
- <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> content attribute relative to the
- element.</dd>
+ <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> content attribute relative to
+ the element.</dd>
<!-- v2: more -->
</dl></li>
<li><p>If <var title="">urls</var> is still empty, abort these
- steps.</li>
+ substeps.</li>
<li><p>Let <var title="">url string</var> be the result of
concatenating the strings in <var title="">urls</var>, in the
order they were added, separated by a U+000D CARRIAGE RETURN
U+000A LINE FEED character pair (CRLF).</li>
- <li><p>Add <var title="">url string</var> to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
- associated with the <code title="">text/uri-list</code>
- format.</li>
+ <li><p>Add one item to the <a href=#drag-data-store-item-list>drag data store item
+ list</a>, with its properties set as follows:</p>
+ <dl><dt><a href=#the-drag-data-item-type-string>The drag data item type string</a>
+ <dd><code>text/uri-list</code></dd>
+
+ <dt><a href=#the-drag-data-item-kind>The drag data item kind</a>
+ <dd><i>Plain Unicode string</i></dd>
+
+ <dt>The actual data</dt>
+ <dd><var title="">url string</var></dd>
+
+ </dl></li>
+
</ol></li>
- </ul><hr><p>If the event is canceled, then the drag-and-drop operation must
- not occur; the user agent must not continue with this algorithm.</p>
+ <li>
- <p>If it is not canceled, then the drag-and-drop operation must be
- initiated.</p>
+ <p>If it is an element that is being dragged, then set the
+ <span>drag data store list of elements</span> to contain just the
+ <a href=#source-node>source node</a>.</p>
- <p class=note>Since events with no event listeners registered are,
- almost by definition, never canceled, drag-and-drop is always
- available to the user if the author does not specifically prevent
- it.</p>
+ <p>Otherwise, update the <a href=#drag-data-store-default-feedback>drag data store default
+ feedback</a> as appropriate for the user agent (if the user is
+ dragging the selection, then the selection would likely be the
+ basis for this feedback).</p>
- <p id=base-dnd-feedback>The drag-and-drop feedback must be
- generated from the first of the following sources that is
- available:</p>
+ <p class=note>Script can use the <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> method to
+ add further elements to the list of what is being dragged. (This
+ list is only used for rendering the drag feedback.)</p>
- <ol><li>The element specified in the last call to the <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> method
- of the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
- object of the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event,
- if the method was called. In visual media, if this is used, the
- <var title="">x</var> and <var title="">y</var> arguments that were
- passed to that method should be used as hints for where to put the
- cursor relative to the resulting image. The values are expressed as
- distances in CSS pixels from the left side and from the top side of
- the image respectively. <a href=#refsCSS>[CSS]</a></li>
+ </li>
- <li>The elements that were added to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object, both
- before the event was fired, and during the handling of the event
- using the <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code>
- method, if any such elements were indeed added.</li>
+ <li>
- <li>The selection that the user is dragging.</li>
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> at the <a href=#source-node>source
+ node</a>.</p>
- </ol><p>The user agent must take a note of <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>the data that was placed</a> in
- the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
- object. This data will be made available again when the <code title=event-drop><a href=#event-drop>drop</a></code> event is fired.</p>
+ <p>If the event is canceled, then the drag-and-drop operation
+ should not occur; abort these steps.</p> <!-- only a should
+ because the UA can always allow the user to drag without the page
+ knowing -->
- <p>From this point until the end of the drag-and-drop operation,
- device input events (e.g. mouse and keyboard events) must be
- suppressed. In addition, the user agent must track all DOM changes
- made during the drag-and-drop operation, and add them to its <a href=#undo>undo history</a> as one atomic operation once the
+ <p class=note>Since events with no event listeners registered
+ are, almost by definition, never canceled, drag-and-drop is always
+ available to the user if the author does not specifically prevent
+ it.</p>
+
+ </li>
+
+ <li>
+
+ <p><a href=#initiate-the-drag-and-drop-operation>Initiate the drag-and-drop operation</a> in a manner
+ consistent with platform conventions, and as described below.</p>
+
+ <p id=base-dnd-feedback>The drag-and-drop feedback must be
+ generated from the first of the following sources that is
+ available:</p>
+
+ <ol><li>The <a href=#drag-data-store-bitmap>drag data store bitmap</a>, if any. In this
+ case, the <a href=#drag-data-store-hot-spot-coordinate>drag data store hot spot coordinate</a> should
+ be used as hints for where to put the cursor relative to the
+ resulting image. The values are expressed as distances in CSS
+ pixels from the left side and from the top side of the image
+ respectively. <a href=#refsCSS>[CSS]</a></li>
+
+ <li>The elements in the <span>drag data store element
+ list</span>, if any.</li>
+
+ <li>The <a href=#drag-data-store-default-feedback>drag data store default feedback</a>.</li>
+
+ </ol></li>
+
+ </ol><p>From the moment that the user agent is to <dfn id=initiate-the-drag-and-drop-operation>initiate the
+ drag-and-drop operation</dfn>, until the end of the drag-and-drop
+ operation, device input events (e.g. mouse and keyboard events) must
+ be suppressed. In addition, the user agent must track all DOM
+ changes made during the drag-and-drop operation, and add them to its
+ <a href=#undo>undo history</a> as one atomic operation once the
drag-and-drop operation has ended.</p>
<p>During the drag operation, the element directly indicated by the
user as the drop target is called the <dfn id=immediate-user-selection>immediate user
selection</dfn>. (Only elements can be selected by the user; other
- nodes must not be made available as drop targets.)
+ nodes must not be made available as drop targets.) However, the
+ <a href=#immediate-user-selection>immediate user selection</a> is not necessarily the
+ <dfn id=current-target-element>current target element</dfn>, which is the element currently
+ selected for the drop part of the drag-and-drop operation.</p>
- However, the <a href=#immediate-user-selection>immediate user selection</a> is not
- necessarily the <dfn id=current-target-element>current target element</dfn>, which is the
- element currently selected for the drop part of the drag-and-drop
- operation.
-
- The <a href=#immediate-user-selection>immediate user selection</a> changes as the user
+ <p>The <a href=#immediate-user-selection>immediate user selection</a> changes as the user
selects different elements (either by pointing at them with a
pointing device, or by selecting them in some other way). The
<a href=#current-target-element>current target element</a> changes when the <a href=#immediate-user-selection>immediate
@@ -66627,11 +66838,10 @@
<a href=#current-target-element>current target element</a> is initially null.</p>
<p>In addition, there is also a <dfn id=current-drag-operation>current drag operation</dfn>,
- which can take on the values "none", "copy", "link", and "move".
- Initially, it has the value "none". It is updated by the user agent
- as described in the steps below.</p>
+ which can take on the values "<code title="">none</code>", "<code title="">copy</code>", "<code title="">link</code>", and "<code title="">move</code>". Initially, it has the value "<code title="">none</code>". It is updated by the user agent as described
+ in the steps below.</p>
- <p>User agents must, as soon as the drag operation is initiated and
+ <p>User agents must, as soon as the drag operation is <a href=#initiate-the-drag-and-drop-operation title="initiate the drag-and-drop operation">initiated</a> and
every 350ms (±200ms) thereafter for as long as the drag
operation is ongoing, <a href=#queue-a-task>queue a task</a> to perform the
following steps in sequence:</p>
@@ -66639,55 +66849,54 @@
<ol><li>
<p>If the user agent is still performing the previous iteration of
- the sequence (if any) when the next iteration becomes due, the
- user agent must not execute the overdue iteration, effectively
- "skipping missed frames" of the drag-and-drop operation.</p>
+ the sequence (if any) when the next iteration becomes due, abort
+ these steps for this iteration (effectively "skipping missed
+ frames" of the drag-and-drop operation).</p>
</li>
<li>
- <p>The user agent must fire a <code title=event-drag><a href=#event-drag>drag</a></code>
- event at the <a href=#source-node>source node</a>. If this event is canceled,
- the user agent must set the <a href=#current-drag-operation>current drag operation</a> to
- none (no drag operation).</p>
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-drag><a href=#event-drag>drag</a></code> event at the <a href=#source-node>source
+ node</a>. If this event is canceled, the user agent must set
+ the <a href=#current-drag-operation>current drag operation</a> to "<code title="">none</code>" (no drag operation).</p>
</li>
<li>
- <p>Next, if the <code title=event-drag><a href=#event-drag>drag</a></code> event was not
+ <p>If the <code title=event-drag><a href=#event-drag>drag</a></code> event was not
canceled and the user has not ended the drag-and-drop operation,
- the user agent must check the state of the drag-and-drop
- operation, as follows:</p>
+ check the state of the drag-and-drop operation, as follows:</p>
<ol><li>
- <p>First, if the user is indicating a different <a href=#immediate-user-selection>immediate
- user selection</a> than during the last iteration (or if this
- is the first iteration), and if this <a href=#immediate-user-selection>immediate user
+ <p>If the user is indicating a different <a href=#immediate-user-selection>immediate user
+ selection</a> than during the last iteration (or if this is
+ the first iteration), and if this <a href=#immediate-user-selection>immediate user
selection</a> is not the same as the <a href=#current-target-element>current target
- element</a>, then the <a href=#current-target-element>current target element</a> must
- be updated, as follows:</p>
+ element</a>, then update the <a href=#current-target-element>current target
+ element</a> as follows:</p>
<dl class=switch><dt>If the new <a href=#immediate-user-selection>immediate user selection</a> is null, or
is in a non-DOM document or application</dt>
- <dd><p>The user agent must set the <a href=#current-target-element>current target
- element</a> to the same value.</dd>
+ <dd><p>Set the <a href=#current-target-element>current target element</a> to the same
+ value.</dd>
<dt>Otherwise</dt>
<dd>
- <p>The user agent must fire a <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event at the
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> at the
<a href=#immediate-user-selection>immediate user selection</a>.</p>
- <p>If the event is canceled, then the <a href=#current-target-element>current target
- element</a> must be set to the <a href=#immediate-user-selection>immediate user
+ <p>If the event is canceled, then set the <a href=#current-target-element>current target
+ element</a> to the <a href=#immediate-user-selection>immediate user
selection</a>.</p>
- <p>Otherwise, the user agent must act as follows:</p>
+ <p>Otherwise, run the appropriate step from the following
+ list:</p>
<dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text
field (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code>
@@ -66695,26 +66904,31 @@
attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
<a href=#editable>editable</a> element</dt>
- <dd><p>The <a href=#current-target-element>current target element</a> must be set to
- the <a href=#immediate-user-selection>immediate user selection</a> anyway.</dd>
+ <dd><p>Set the <a href=#current-target-element>current target element</a> to the
+ <a href=#immediate-user-selection>immediate user selection</a> anyway.</dd>
<dt>If the <a href=#current-target-element>current target element</a> is
<a href=#the-body-element>the body element</a></dt>
- <dd><p>The <a href=#current-target-element>current target element</a> is left
+ <dd><p>Leave the <a href=#current-target-element>current target element</a>
unchanged.</dd>
<dt>Otherwise</dt>
- <dd><p>The user agent must fire a <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event at <a href=#the-body-element>the
- body element</a>, and the <a href=#current-target-element>current target
- element</a> must be set to <a href=#the-body-element>the body element</a>,
- regardless of whether that event was canceled or not. (If
- <a href=#the-body-element>the body element</a> is null, then the <a href=#current-target-element>current
- target element</a> would be set to null too in this case,
- it wouldn't be set to the <code><a href=#document>Document</a></code>
- object.)</dd>
+ <dd>
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> at <a href=#the-body-element>the body
+ element</a>, and set the <a href=#current-target-element>current target
+ element</a> to <a href=#the-body-element>the body element</a>, regardless
+ of whether that event was canceled or not.</p>
+
+ <p class=note>If <a href=#the-body-element>the body element</a> is null,
+ then the event will be fired at the <code><a href=#document>Document</a></code>
+ object (as required by the definition of <a href=#the-body-element>the body
+ element</a>), but the <a href=#current-target-element>current target element</a>
+ would be set to null, not the <code><a href=#document>Document</a></code>
+ object.</dd>
+
</dl></dd>
</dl></li>
@@ -66723,20 +66937,21 @@
<p>If the previous step caused the <a href=#current-target-element>current target
element</a> to change, and if the previous target element was
- not null or a part of a non-DOM document, the user agent must fire
- a <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event at the
- previous target element.</p>
+ not null or a part of a non-DOM document, then <a href=#fire-a-dnd-event>fire a DND
+ event</a> named <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> at the previous target
+ element.</p>
</li>
<li>
<p>If the <a href=#current-target-element>current target element</a> is a DOM element,
- the user agent must fire a <code title=event-dragover><a href=#event-dragover>dragover</a></code> event at this <a href=#current-target-element>current
+ then <a href=#fire-a-dnd-event>fire a DND event</a> named <code title=event-dragover><a href=#event-dragover>dragover</a></code> at this <a href=#current-target-element>current
target element</a>.</p>
<p>If the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event is
- not canceled, the user agent must act as follows:</p>
+ not canceled, run the appropriate step from the following
+ list:</p>
<dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
(e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
@@ -66744,59 +66959,59 @@
the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
<a href=#editable>editable</a> element</dt>
- <dd><p>The user agent must set the <a href=#current-drag-operation>current drag
- operation</a> to either "copy" or "move", as appropriate
- given the platform conventions.</dd>
+ <dd><p>Set the <a href=#current-drag-operation>current drag operation</a> to either
+ "<code title="">copy</code>" or "<code title="">move</code>",
+ as appropriate given the platform conventions.</dd>
<dt>Otherwise</dt>
- <dd><p>The user agent must reset the <a href=#current-drag-operation>current drag
- operation</a> to "none".</dd>
+ <dd><p>Reset the <a href=#current-drag-operation>current drag operation</a> to "<code title="">none</code>".</dd>
</dl><p>Otherwise (if the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event <em>is</em>
- canceled), the <a href=#current-drag-operation>current drag operation</a> must be set
- based on the values the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> and
+ canceled), set the <a href=#current-drag-operation>current drag operation</a> based on
+ the values of the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> and
<code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
- attributes of the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
- had after the event was handled, as per the following table:</p>
+ attributes of the <code><a href=#dragevent>DragEvent</a></code> object's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object as
+ they stood after the event dispatch finished, as per the
+ following table:</p>
<table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
<th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
<th>Drag operation</th>
- </thead><tr><td><code title="">uninitialized</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, or <code title="">all</code></td>
- <td><code title="">copy</code></td>
- <td>"copy"</td>
- <tr><td><code title="">uninitialized</code>, <code title="">link</code>, <code title="">copyLink</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
- <td><code title="">link</code></td>
- <td>"link"</td>
- <tr><td><code title="">uninitialized</code>, <code title="">move</code>, <code title="">copyMove</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
- <td><code title="">move</code></td>
- <td>"move"</td>
+ </thead><tr><td>"<code title="">uninitialized</code>", "<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">copy</code>"</td>
+ <td>"<code title="">copy</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>", "<code title="">link</code>", "<code title="">copyLink</code>", "<code title="">linkMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">link</code>"</td>
+ <td>"<code title="">link</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>", "<code title="">move</code>", "<code title="">copyMove</code>", "<code title="">linkMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">move</code>"</td>
+ <td>"<code title="">move</code>"</td>
<tr><td colspan=2>Any other case</td>
- <td>"none"</td>
+ <td>"<code title="">none</code>"</td>
</table><p>Then, regardless of whether the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event was canceled or
- not, the drag feedback (e.g. the mouse cursor) must be updated
- to match the <a href=#current-drag-operation>current drag operation</a>, as
- follows:</p>
+ not, update the drag feedback (e.g. the mouse cursor) to match
+ the <a href=#current-drag-operation>current drag operation</a>, as follows:</p>
<table><thead><tr><th>Drag operation</th>
<th>Feedback</th>
- </thead><tr><td>"copy"</td>
+ </thead><tr><td>"<code title="">copy</code>"</td>
<td>Data will be copied if dropped here.</td>
- <tr><td>"link"</td>
+ <tr><td>"<code title="">link</code>"</td>
<td>Data will be linked if dropped here.</td>
- <tr><td>"move"</td>
+ <tr><td>"<code title="">move</code>"</td>
<td>Data will be moved if dropped here.</td>
- <tr><td>"none"</td>
+ <tr><td>"<code title="">none</code>"</td>
<td>No operation allowed, dropping here will cancel the drag-and-drop operation.</td>
</table></li>
<li>
- <p>Otherwise, if the <a href=#current-target-element>current target element</a> is not a
- DOM element, the user agent must use platform-specific mechanisms
- to determine what drag operation is being performed (none, copy,
- link, or move). This sets the <em>current drag operation</em>.</p>
+ <p>Otherwise, if the <a href=#current-target-element>current target element</a> is not
+ a DOM element, use platform-specific mechanisms to determine
+ what drag operation is being performed (none, copy, link, or
+ move), and set the <i><a href=#current-drag-operation>current drag operation</a></i>
+ accordingly.</p>
</li>
@@ -66807,90 +67022,88 @@
<p>Otherwise, if the user ended the drag-and-drop operation (e.g.
by releasing the mouse button in a mouse-driven drag-and-drop
interface), or if the <code title=event-drag><a href=#event-drag>drag</a></code> event
- was canceled, then this will be the last iteration. The user agent
- must execute the following steps, then stop looping.</p>
+ was canceled, then this will be the last iteration. Run the
+ following steps, then stop the drag-and-drop operation:</p>
<ol><li>
- <p>If the <a href=#current-drag-operation>current drag operation</a> is none (no drag
- operation), or, if the user ended the drag-and-drop operation by
- canceling it (e.g. by hitting the <kbd>Escape</kbd> key), or if
- the <a href=#current-target-element>current target element</a> is null, then the drag
- operation failed. If the <a href=#current-target-element>current target element</a> is
- a DOM element, the user agent must fire a <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event at it; otherwise,
- if it is not null, it must use platform-specific conventions for
- drag cancellation.</p>
+ <p>If the <a href=#current-drag-operation>current drag operation</a> is "<code title="">none</code>" (no drag operation), or, if the user ended
+ the drag-and-drop operation by canceling it (e.g. by hitting the
+ <kbd>Escape</kbd> key), or if the <a href=#current-target-element>current target
+ element</a> is null, then the drag operation failed. Run
+ these substeps:</p>
- </li>
+ <ol><li><p>Let <var title="">dropped</var> be false.</li>
- <li>
+ <li><p>If the <a href=#current-target-element>current target element</a> is a DOM
+ element, <a href=#fire-a-dnd-event>fire a DND event</a> named <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> at it; otherwise, if
+ it is not null, use platform-specific conventions for drag
+ cancellation.</p>
- <p>Otherwise, the drag operation was as success. If the
- <a href=#current-target-element>current target element</a> is a DOM element, the user
- agent must fire a <code title=event-drop><a href=#event-drop>drop</a></code> event at
- it; otherwise, it must use platform-specific conventions for
- indicating a drop.</p>
+ </ol><p>Otherwise, the drag operation was as success; run these substeps:</p>
- <p>When the target is a DOM element, the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
- of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
- must be given the value representing the <a href=#current-drag-operation>current drag
- operation</a> (<code title="">copy</code>, <code title="">link</code>, or <code title="">move</code>), and the
- object must be set up so that the <code title=dom-DataTransfer-getData><a href=#dom-datatransfer-getdata>getData()</a></code> method will
- return the data that was added during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event, and the <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> attribute will
- return a <code>FileList</code> object with any files that were
- dragged.</p>
+ <ol><li><p>Let <var title="">dropped</var> be true.</li>
- <p>If the event is canceled, the <a href=#current-drag-operation>current drag
- operation</a> must be set to the value of the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
- of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object as
- it stood after the event was handled.</p>
+ <li><p>If the <a href=#current-target-element>current target element</a> is a DOM
+ element, <a href=#fire-a-dnd-event>fire a DND event</a> named <code title=event-drop><a href=#event-drop>drop</a></code> at it; otherwise, use
+ platform-specific conventions for indicating a drop.</li>
- <p>Otherwise, the event is not canceled, and the user agent must
- perform the event's default action, which depends on the exact
- target as follows:</p>
+ <li>
- <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
- (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
- whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
- the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
- <a href=#editable>editable</a> element</dt>
+ <p>If the event is canceled, set the <a href=#current-drag-operation>current drag
+ operation</a> to the value of the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
+ of the <code><a href=#dragevent>DragEvent</a></code> object's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
+ as it stood after the event dispatch finished.</p>
- <dd>The user agent must insert the data associated with the
- <code>text/plain</code> format, if any, into the text field or
- <a href=#editable>editable</a> element in a manner consistent with
- platform-specific conventions (e.g. inserting it at the current
- mouse cursor position, or inserting it at the end of the
- field).</dd>
+ <p>Otherwise, the event is not canceled; perform the event's
+ default action, which depends on the exact target as
+ follows:</p>
- <dt>Otherwise</dt>
+ <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
+ (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
+ whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
+ the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
+ <a href=#editable>editable</a> element</dt>
- <dd>Reset the <a href=#current-drag-operation>current drag operation</a> to
- "none".</dd>
+ <dd><p>If the <a href=#drag-data-store-item-list>drag data store item list</a> has an
+ item with <a href=#the-drag-data-item-type-string>the drag data item type string</a>
+ "<code>text/plain</code>" and <a href=#the-drag-data-item-kind>the drag data item
+ kind</a> <i>Plain Unicode string</i>, insert the actual data
+ of that item into the text field or <a href=#editable>editable</a>
+ element in a manner consistent with platform-specific
+ conventions (e.g. inserting it at the current mouse cursor
+ position, or inserting it at the end of the field).</dd>
- </dl></li>
+ <dt>Otherwise</dt>
+ <dd><p>Reset the <a href=#current-drag-operation>current drag operation</a> to
+ "<code title="">none</code>".</p>~</dd>
+
+ </dl></li>
+
+ </ol></li>
+
<li>
- <p>Finally, the user agent must fire a <code title=event-dragend><a href=#event-dragend>dragend</a></code> event at the <a href=#source-node>source
- node</a>, with the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
- of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
- being set to the value corresponding to the <a href=#current-drag-operation>current drag
- operation</a>.</p>
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-dragend><a href=#event-dragend>dragend</a></code> at the <a href=#source-node>source
+ node</a>.</p>
- <p class=note>The <a href=#current-drag-operation>current drag operation</a> can
- change during the processing of the <code title=event-drop><a href=#event-drop>drop</a></code> event, if one was fired.</p>
+ </li>
- <p>The event is not cancelable. After the event has been
- handled, the user agent must act as follows:</p>
+ <li>
+ <p>Run the appropriate steps from the following list as the
+ default action of the <code title=event-dragend><a href=#event-dragend>dragend</a></code>
+ event:</p>
+
<dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
(e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state), and
- a <code title=event-drop><a href=#event-drop>drop</a></code> event was fired in the
- previous step, and the <a href=#current-drag-operation>current drag operation</a> is
- "move", and the source of the drag-and-drop operation is a
- selection in the DOM</dt>
+ <var title="">dropped</var> is true, and the <a href=#current-drag-operation>current drag
+ operation</a> is "<code title="">move</code>", and the
+ source of the drag-and-drop operation is a selection in the
+ DOM</dt>
<dd>The user agent should delete the range representing the
dragged selection from the DOM.</dd>
@@ -66899,10 +67112,10 @@
(e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state), and
- a <code title=event-drop><a href=#event-drop>drop</a></code> event was fired in the
- previous step, and the <a href=#current-drag-operation>current drag operation</a> is
- "move", and the source of the drag-and-drop operation is a
- selection in a text field</dt>
+ <var title="">dropped</var> is true, and the <a href=#current-drag-operation>current drag
+ operation</a> is "<code title="">move</code>", and the
+ source of the drag-and-drop operation is a selection in a text
+ field</dt>
<dd>The user agent should delete the dragged selection from the
relevant text field.</dd>
@@ -66926,7 +67139,7 @@
<div class=impl>
- <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.7.4.1 </span>When the drag-and-drop operation starts or ends in another
+ <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.7.5.1 </span>When the drag-and-drop operation starts or ends in another
document</h5>
<p>The model described above is independent of which
@@ -66941,7 +67154,7 @@
<div class=impl>
- <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.7.4.2 </span>When the drag-and-drop operation starts or ends in another
+ <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.7.5.2 </span>When the drag-and-drop operation starts or ends in another
application</h5>
<p>If the drag is initiated in another application, the <a href=#source-node>source
@@ -66971,8 +67184,87 @@
</div>
- <h4 id=the-draggable-attribute><span class=secno>8.7.5 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
+ <h4 id=dndevents><span class=secno>8.7.6 </span>Events summary</h4>
+ <p><i>This section is non-normative.</i></p>
+
+ <p>The following events are involved in the drag-and-drop
+ model.</p>
+
+ <table><thead><tr><th> Event Name </th>
+ <th> Target </th>
+ <!-- <th> Bubbles? </th> -->
+ <th> Cancelable? </th>
+ <th> <a href=#drag-data-store-mode>Drag data store mode</a> </th>
+ <!-- <th> <code title="dom-DataTransfer-effectAllowed">effectAllowed</code> </th> -->
+ <th> <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> </th>
+ <th> Default Action </th>
+ <tbody><tr><td><dfn id=event-dragstart title=event-dragstart><code>dragstart</code></dfn></td>
+ <td><a href=#source-node>Source node</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-rw title=concept-dnd-rw>Read/write mode</a>
+ <!-- <td>"<code title="">uninitialized</code>"</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>Initiate the drag-and-drop operation</td>
+ <tr><td><dfn id=event-drag title=event-drag><code>drag</code></dfn></td>
+ <td><a href=#source-node>Source node</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>Continue the drag-and-drop operation</td>
+ <tr><td><dfn id=event-dragenter title=event-dragenter><code>dragenter</code></dfn></td>
+ <td><a href=#immediate-user-selection>Immediate user selection</a> or <a href=#the-body-element>the body element</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
+ <td>Reject <a href=#immediate-user-selection>immediate user selection</a> as potential <a href=#current-target-element title="current target element">target element</a></td>
+ <tr><td><dfn id=event-dragleave title=event-dragleave><code>dragleave</code></dfn></td>
+ <td><a href=#current-target-element title="current target element">Previous target element</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>—</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>None</td>
+ <tr><td><dfn id=event-dragover title=event-dragover><code>dragover</code></dfn></td>
+ <td><a href=#current-target-element>Current target element</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
+ <td>Reset the <a href=#current-drag-operation>current drag operation</a> to "none"</td>
+ <tr><td><dfn id=event-drop title=event-drop><code>drop</code></dfn></td>
+ <td><a href=#current-target-element>Current target element</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-ro title=concept-dnd-ro>Read-only mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td><a href=#current-drag-operation>Current drag operation</a></td>
+ <td>Varies</td>
+ <tr><td><dfn id=event-dragend title=event-dragend><code>dragend</code></dfn></td>
+ <td><a href=#source-node>Source node</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>—</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td><a href=#current-drag-operation>Current drag operation</a></td>
+ <td>Varies</td>
+ </table><p>Not shown in the above table: all these events bubble, and the
+ <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute always has the value it had after the previous event was
+ fired, defaulting to "<code title="">uninitialized</code>" in the
+ <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event.</p>
+
+
+
+ <h4 id=the-draggable-attribute><span class=secno>8.7.7 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
+
<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute set. The
<code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute is an
<a href=#enumerated-attribute>enumerated attribute</a>. It has three states. The first
@@ -67113,7 +67405,7 @@
<div class=impl>
- <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.7.6 </span>Security risks in the drag-and-drop model</h4>
+ <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.7.8 </span>Security risks in the drag-and-drop model</h4>
<p>User agents must not make the data added to the
<code><a href=#datatransfer>DataTransfer</a></code> object during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event available to scripts
Modified: index
===================================================================
--- index 2010-10-25 22:32:13 UTC (rev 5646)
+++ index 2010-10-27 23:01:54 UTC (rev 5647)
@@ -218,7 +218,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/ rel=home><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1>HTML5 (including next generation additions still in development)</h1>
- <h2 class="no-num no-toc">Draft Standard — 25 October 2010</h2>
+ <h2 class="no-num no-toc">Draft Standard — 27 October 2010</h2>
</hgroup><p>You can take part in this work. <a href=http://www.whatwg.org/mailing-list>Join the working group's discussion list.</a></p>
<p><strong>Web designers!</strong> We have a <a href=http://blog.whatwg.org/faq/>FAQ</a>, a <a href=http://forums.whatwg.org/>forum</a>, and a <a href=http://www.whatwg.org/mailing-list#help>help mailing list</a> for you!</p>
<!--<p class="impl"><strong>Implementors!</strong> We have a <a href="http://www.whatwg.org/mailing-list#implementors">mailing list</a> for you too!</p>-->
@@ -965,16 +965,18 @@
<li><a href=#dnd><span class=secno>8.7 </span>Drag and drop</a>
<ol>
<li><a href=#introduction-7><span class=secno>8.7.1 </span>Introduction</a></li>
- <li><a href=#the-dragevent-and-datatransfer-interfaces><span class=secno>8.7.2 </span>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</a></li>
- <li><a href=#dndevents><span class=secno>8.7.3 </span>Events fired during a drag-and-drop action</a></li>
- <li><a href=#drag-and-drop-processing-model><span class=secno>8.7.4 </span>Drag-and-drop processing model</a>
+ <li><a href=#the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</a></li>
+ <li><a href=#the-datatransfer-interface><span class=secno>8.7.3 </span>The <code>DataTransfer</code> interface</a></li>
+ <li><a href=#the-dragevent-interface><span class=secno>8.7.4 </span>The <code>DragEvent</code> interface</a></li>
+ <li><a href=#drag-and-drop-processing-model><span class=secno>8.7.5 </span>Drag-and-drop processing model</a>
<ol>
- <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.7.4.1 </span>When the drag-and-drop operation starts or ends in another
+ <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.7.5.1 </span>When the drag-and-drop operation starts or ends in another
document</a></li>
- <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.7.4.2 </span>When the drag-and-drop operation starts or ends in another
+ <li><a href=#when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.7.5.2 </span>When the drag-and-drop operation starts or ends in another
application</a></ol></li>
- <li><a href=#the-draggable-attribute><span class=secno>8.7.5 </span>The <code>draggable</code> attribute</a></li>
- <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.7.6 </span>Security risks in the drag-and-drop model</a></ol></li>
+ <li><a href=#dndevents><span class=secno>8.7.6 </span>Events summary</a></li>
+ <li><a href=#the-draggable-attribute><span class=secno>8.7.7 </span>The <code>draggable</code> attribute</a></li>
+ <li><a href=#security-risks-in-the-drag-and-drop-model><span class=secno>8.7.8 </span>Security risks in the drag-and-drop model</a></ol></li>
<li><a href=#undo><span class=secno>8.8 </span>Undo history</a>
<ol>
<li><a href=#definitions-2><span class=secno>8.8.1 </span>Definitions</a></li>
@@ -65937,138 +65939,150 @@
+ <h4 id=the-drag-data-store><span class=secno>8.7.2 </span>The drag data store</h4>
- <h4 id=the-dragevent-and-datatransfer-interfaces><span class=secno>8.7.2 </span>The <code><a href=#dragevent>DragEvent</a></code> and <code><a href=#datatransfer>DataTransfer</a></code> interfaces</h4>
+ <p>The data that underlies a drag-and-drop operation, known as the
+ <dfn id=drag-data-store>drag data store</dfn>, consists of the following information:</p>
- <p>The drag-and-drop processing model involves several events. They
- all use the <code><a href=#dragevent>DragEvent</a></code> interface.</p>
+ <ul><li><p>A <dfn id=drag-data-store-item-list>drag data store item list</dfn>, which is a list of
+ items representing the dragged data, each consisting of the
+ following information:</p>
- <pre class=idl>interface <dfn id=dragevent>DragEvent</dfn> : <span>MouseEvent</span> {
- readonly attribute <a href=#datatransfer>DataTransfer</a> <a href=#dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer>dataTransfer</a>;
+ <dl><dt><dfn id=the-drag-data-item-type-string>The drag data item type string</dfn></dt>
- void <a href=#dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent>initDragEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg<!-- used to be viewArg, back when we had views -->, 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 <a href=#datatransfer>DataTransfer</a> dataTransferArg);
-};</pre>
+ <dd>
- <dl class=domintro><dt><var title="">event</var> . <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code></dt>
+ <p>A Unicode string giving the type or format of the data,
+ generally given by a <a href=#mime-type>MIME type</a>. Some values that
+ are not <a href=#mime-type title="MIME type">MIME types</a> are
+ special-cased for legacy reasons. The API does not enforce the
+ use of <a href=#mime-type title="MIME type">MIME types</a>; other values
+ can be used as well. In all cases, however, the values are all
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> by the API.</p>
- <dd>
+ </dd>
- <p>Returns the <code><a href=#datatransfer>DataTransfer</a></code> object for the event.</p>
+ <dt><dfn id=the-drag-data-item-kind>The drag data item kind</dfn></dt>
- </dd>
+ <dd>
- </dl><div class=impl>
+ <p>The kind of data:</p>
- <p>The <dfn id=dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent><code>initDragEvent()</code></dfn>
- method must initialize the event in a manner analogous to the
- similarly-named method in the DOM Events interfaces, except that the
- <var title="">dummyArg</var> argument must be ignored. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
+ <dl><dt><i>Plain Unicode string</i></dt>
+ <dd>
+ <p>Raw text.</p>
+ </dd>
- <p>The <dfn id=dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer><code>dataTransfer</code></dfn>
- attribute of the <code><a href=#dragevent>DragEvent</a></code> interface represents the
- context information for the event.</p>
+ <dt><i>Blob</i></dt>
+ <dd>
+ <p>Binary data.</p>
+ </dd>
- </div>
+ <dt><i>File</i></dt>
+ <dd>
+ <p>Binary data with a file name.</p>
+ </dd>
- <pre class=idl>interface <dfn id=datatransfer>DataTransfer</dfn> {
- attribute DOMString <a href=#dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect>dropEffect</a>;
- attribute DOMString <a href=#dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed>effectAllowed</a>;
+ </dl></dd>
- readonly attribute DOMStringList <a href=#dom-datatransfer-types title=dom-DataTransfer-types>types</a>;
- void <a href=#dom-datatransfer-cleardata title=dom-DataTransfer-clearData>clearData</a>(in optional DOMString format);
- void <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>setData</a>(in DOMString format, in DOMString data);
- DOMString <a href=#dom-datatransfer-getdata title=dom-DataTransfer-getData>getData</a>(in DOMString format);
- readonly attribute <span>FileList</span> <a href=#dom-datatransfer-files title=dom-DataTransfer-files>files</a>;
+ <dt>The actual data</dt>
- void <a href=#dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage>setDragImage</a>(in Element image, in long x, in long y);
- void <a href=#dom-datatransfer-addelement title=dom-DataTransfer-addElement>addElement</a>(in Element element);
-};</pre>
+ <dd><p>A Unicode or binary string, optionally with a file name
+ (itself a Unicode string), as per <a href=#the-drag-data-item-kind>the drag data item
+ kind</a>.</dd>
- <p><code><a href=#datatransfer>DataTransfer</a></code> objects are used to expose the data
- that underlies a drag-and-drop operation.</p>
+ </dl></li>
- <p>The data that underlies a drag-and-drop operation, known as the
- <dfn id=drag-data-store>drag data store</dfn>, consists of an unordered list of items
- representing the dragged data, and some information used to generate
- the UI feedback during the drag.</p>
+ <li>
- <p>Each item representing dragged data in a <a href=#drag-data-store>drag data
- store</a> has the following information:</p>
+ <p>The following information, used to generate the UI feedback
+ during the drag:</p>
- <ul><li>
+ <ul><li>User-agent-defined default feedback information, known as the
+ <dfn id=drag-data-store-default-feedback>drag data store default feedback</dfn>.</li>
- <p>The type or format of the data, generally given by a <a href=#mime-type>MIME
- type</a>. Some values that are not <a href=#mime-type title="MIME type">MIME
- types</a> are special-cased for legacy reasons. The API does
- not enforce the use of <a href=#mime-type title="MIME type">MIME types</a>;
- other values can be used as well. In all cases, however, the
- values are all <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a> by the
- API.</p>
+ <li>A list of zero or more elements known as the <dfn id=drag-data-store-elements-list>drag data
+ store elements list</dfn>.</li>
- </li>
+ <li>Optionally, a bitmap image and the coordinate of a point
+ within that image, known as the <dfn id=drag-data-store-bitmap>drag data store bitmap</dfn>
+ and <dfn id=drag-data-store-hot-spot-coordinate>drag data store hot spot coordinate</dfn>.</li>
+ </ul></li>
+
<li>
- <p>The kind of data:</p>
+ <p>A <dfn id=drag-data-store-mode>drag data store mode</dfn>, which is one of the
+ following:</p>
- <dl><dt>Plain Unicode string</dt>
+ <dl><dt><dfn id=concept-dnd-rw title=concept-dnd-rw>Read/write mode</dfn></dt>
<dd>
- <p>Raw text.</p>
+
+ <p>For the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event.
+ New data can be added to the <a href=#drag-data-store>drag data store</a>.</p>
+
</dd>
- <dt>Blob</dt>
+ <dt><dfn id=concept-dnd-ro title=concept-dnd-ro>Read-only mode</dfn></dt>
<dd>
- <p>Binary data.</p>
+
+ <p>For the <code title=event-drop><a href=#event-drop>drop</a></code> event. The list of
+ items representing dragged data can be read, including the data.
+ No new data can be added.</p>
+
</dd>
- <dt>File</dt>
+ <dt><dfn id=concept-dnd-p title=concept-dnd-p>Protected mode</dfn></dt>
<dd>
- <p>Binary data with a file name.</p>
+
+ <p>For all other events. The formats and kinds in the <a href=#drag-data-store>drag
+ data store</a> list of items representing dragged data can be
+ enumerated, but the data itself is unavailable and no new data can
+ be added.</p>
+
</dd>
</dl></li>
- </ul><p>The information in a <a href=#drag-data-store>drag data store</a> used to
- generate the UI feedback during the drag consists of:</p>
+ <li>
- <ul><li>A list of zero or more elements.</li>
+ <p>A <dfn id=drag-data-store-allowed-effects-state>drag data store allowed effects state</dfn>, which is a
+ string.</p>
- <li>Optionally, a bitmap image and the coordinate of a point within
- that image.</li>
+ </li>
- </ul><p>A <a href=#drag-data-store>drag data store</a> is created at the start of a
- drag-and-drop operation in the <i>read/write mode</i>, and then
- progresses through the following three modes as the operation
- proceeds:</p>
+ </ul><p>When a <a href=#drag-data-store>drag data store</a> is <dfn id=create-a-drag-data-store title="create a drag
+ data store">created</dfn>, it must be initialized such that its
+ <a href=#drag-data-store-item-list>drag data store item list</a> is empty, it has no
+ <a href=#drag-data-store-default-feedback>drag data store default feedback</a>, its <a href=#drag-data-store-elements-list>drag data
+ store elements list</a> is empty, it has no <a href=#drag-data-store-bitmap>drag data store
+ bitmap</a> / <a href=#drag-data-store-hot-spot-coordinate>drag data store hot spot coordinate</a>,
+ its <a href=#drag-data-store-mode>drag data store mode</a> is <a href=#concept-dnd-p title=concept-dnd-p>protected mode</a>, and its <a href=#drag-data-store-allowed-effects-state>drag data
+ store allowed effects state</a> is the string "<code title="">uninitialized</code>".</p>
- <dl><dt>Read/write mode</dt>
- <dd>
- <p>At the start of the drag. New data can be added to the
- <a href=#drag-data-store>drag data store</a>.</p>
+ <h4 id=the-datatransfer-interface><span class=secno>8.7.3 </span>The <code><a href=#datatransfer>DataTransfer</a></code> interface</h4>
- </dd>
+ <p><code><a href=#datatransfer>DataTransfer</a></code> objects are used to expose the
+ <a href=#drag-data-store>drag data store</a> that underlies a drag-and-drop
+ operation.</p>
- <dt>Protected mode</dt>
- <dd>
+ <pre class=idl>interface <dfn id=datatransfer>DataTransfer</dfn> {
+ attribute DOMString <a href=#dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect>dropEffect</a>;
+ attribute DOMString <a href=#dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed>effectAllowed</a>;
- <p>During the drag. The formats and kinds in the <a href=#drag-data-store>drag data
- store</a> list of items representing dragged data can be
- enumerated, but the data itself is unavailable and no new data can
- be added.</p>
+ readonly attribute DOMStringList <a href=#dom-datatransfer-types title=dom-DataTransfer-types>types</a>;
+ void <a href=#dom-datatransfer-cleardata title=dom-DataTransfer-clearData>clearData</a>(in optional DOMString format);
+ void <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>setData</a>(in DOMString format, in DOMString data);
+ DOMString <a href=#dom-datatransfer-getdata title=dom-DataTransfer-getData>getData</a>(in DOMString format);
+ readonly attribute <span>FileList</span> <a href=#dom-datatransfer-files title=dom-DataTransfer-files>files</a>;
- </dd>
+ void <a href=#dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage>setDragImage</a>(in Element image, in long x, in long y);
+ void <a href=#dom-datatransfer-addelement title=dom-DataTransfer-addElement>addElement</a>(in Element element);
+};</pre>
- <dt>Read-only mode</dt>
- <dd>
+ <dl class=domintro><dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> [ = <var title="">value</var> ]</dt>
- <p>After the drop. The list of items representing dragged data can
- be read, including the data. No new data can be added.</p>
-
- </dd>
-
- </dl><dl class=domintro><dt><var title="">dataTransfer</var> . <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> [ = <var title="">value</var> ]</dt>
-
<dd>
<p>Returns the kind of operation that is currently selected. If
@@ -66078,7 +66092,7 @@
<p>Can be set, to change the selected operation.</p>
- <p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>.</p>
+ <p>The possible values are "<code title="">none</code>", "<code title="">copy</code>", "<code title="">link</code>", and "<code title="">move</code>".</p>
</dd>
@@ -66090,7 +66104,7 @@
<p>Can be set, to change the allowed operations.</p>
- <p>The possible values are <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>,</p>
+ <p>The possible values are "<code title="">none</code>", "<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", "<code title="">link</code>", "<code title="">linkMove</code>", "<code title="">move</code>", "<code title="">all</code>", and "<code title="">uninitialized</code>",</p>
</dd>
@@ -66154,356 +66168,522 @@
</dd>
- </dl><!--
+ </dl><p><code><a href=#datatransfer>DataTransfer</a></code> objects are used during the <a href=#dndevents>drag-and-drop events</a>, and are only valid while
+ those events are being dispatched.</p>
+<!--
+
XXX
plan:
- 2. replace the existing API definitions with links to this model
- 3. make it clear there's a new DataTransfer object with each event
4. expose model with new API
5. add dropzone="..." feature
---><div class=impl>
+-->
- <p>When a <code><a href=#datatransfer>DataTransfer</a></code> object is created, it must be
- initialized as follows:</p>
+ <div class=impl>
- <ul><li>The <code><a href=#datatransfer>DataTransfer</a></code> object must initially contain no
- data, no elements, and have no associated image.</li>
+ <p>A <code><a href=#datatransfer>DataTransfer</a></code> object is associated with a
+ <code><a href=#drag-data-store>drag data store</a></code> while it is valid.</p>
- <li>The <code><a href=#datatransfer>DataTransfer</a></code> object's <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
- attribute must be set to "<code title="">uninitialized</code>".</li>
-
- <li>The <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
- attribute must be set to "<code title="">none</code>".</li>
-
- </ul><p>The <dfn id=dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect><code>dropEffect</code></dfn>
+ <p>The <dfn id=dom-datatransfer-dropeffect title=dom-DataTransfer-dropEffect><code>dropEffect</code></dfn>
attribute controls the drag-and-drop feedback that the user is given
- during a drag-and-drop operation.</p>
+ during a drag-and-drop operation. When the <code><a href=#datatransfer>DataTransfer</a></code>
+ object is created, the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute is
+ set to a string value. On getting, it must return its current value.
+ On setting, if the new value is one of "<code title="">none</code>",
+ "<code title="">copy</code>", "<code title="">link</code>", or
+ "<code title="">move</code>", then the attribute's current value
+ must be set to the new value. Other values must be ignored.</p>
- <p>The attribute must ignore any attempts to set it to a value other
- than <code title="">none</code>, <code title="">copy</code>, <code title="">link</code>, and <code title="">move</code>. On getting,
- the attribute must return the last of those four values that it was
- set to.</p>
-
<p>The <dfn id=dom-datatransfer-effectallowed title=dom-DataTransfer-effectAllowed><code>effectAllowed</code></dfn>
attribute is used in the drag-and-drop processing model to
initialize the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
- during the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code> events.</p>
+ during the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code> events. When the
+ <code><a href=#datatransfer>DataTransfer</a></code> object is created, the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute is set to a string value. On getting, it must return its
+ current value. On setting, if the new value is one of "<code title="">none</code>", "<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", "<code title="">link</code>", "<code title="">linkMove</code>", "<code title="">move</code>", "<code title="">all</code>", or "<code title="">uninitialized</code>", then the attribute's current value
+ must be set to the new value. Other values must be ignored.</p>
- <p>The attribute must ignore any attempts to set it to a value other
- than <code title="">none</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">link</code>, <code title="">linkMove</code>, <code title="">move</code>, <code title="">all</code>, and <code title="">uninitialized</code>. On getting, the attribute must return
- the last of those values that it was set to.</p>
-
<p>The <dfn id=dom-datatransfer-types title=dom-DataTransfer-types><code>types</code></dfn>
attribute must return a <a href=#live>live</a> <code>DOMStringList</code>
- that contains the list of formats that were added to the
- <code><a href=#datatransfer>DataTransfer</a></code> object in the corresponding <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event. The same object must
- be returned each time. If any files were included in the drag, then
- the <code>DOMStringList</code> object must in addition include the
- string "<code title="">Files</code>". (This value can be
- distinguished from the other values because it is not
- lowercase.)</p>
+ giving the strings that the following steps would produce. The same
+ object must be returned each time.</p>
- <p>The <dfn id=dom-datatransfer-cleardata title=dom-DataTransfer-clearData><code>clearData()</code></dfn>
- method, when called with no arguments, must clear the
- <code><a href=#datatransfer>DataTransfer</a></code> object of all data (for all formats).</p>
+ <ol><li><p>Start with an empty list <var title="">L</var>.</li>
- <p class=note>The <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> method does
+ <li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, the
+ <code>DOMStringList</code> is empty. Abort these steps; return the
+ empty list <var title="">L</var>.</li>
+
+ <li><p>For each item in the <a href=#drag-data-store-item-list>drag data store item list</a>
+ <!-- in some order...? --> whose <a href=#the-drag-data-item-kind title="the drag data item
+ kind">kind</a> is <i>Plain Unicode string</i>, add an entry to
+ the list <var title="">L</var> consisting of the item's <a href=#the-drag-data-item-type-string title="the drag data item type string">type string</a>.</li>
+
+ <li><p>If there are any items in the <a href=#drag-data-store-item-list>drag data store item
+ list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a>
+ is <i>File</i>, then add an entry to the list <var title="">L</var>
+ consisting of the string "<code title="">Files</code>". (This value
+ can be distinguished from the other values because it is not
+ lowercase.)</li>
+
+ <!-- <li><p>Sort the list...?</p></li> -->
+
+ <li><p>The strings produced by these steps are those in the list
+ <var title="">L</var>.</li>
+
+ </ol><p>The <dfn id=dom-datatransfer-cleardata title=dom-DataTransfer-clearData><code>clearData()</code></dfn>
+ method must run the following steps:</p>
+
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is not the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write mode</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the method was called with no arguments, remove each item
+ in the <a href=#drag-data-store-item-list>drag data store item list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a> is <i>Plain Unicode
+ string</i>, and abort these steps.</li>
+
+ <li><p>Let <var title="">format</var> be the first argument,
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
+
+ <li>
+
+ <p>If <var title="">format</var> equals "<code title="">text</code>", change it to "<code title="">text/plain</code>".</p>
+
+ <p>If <var title="">format</var> equals "<code title="">url</code>", change it to "<code title="">text/uri-list</code>".</p>
+
+ </li>
+
+ <li><p>Remove each item in the <a href=#drag-data-store-item-list>drag data store item
+ list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a>
+ is <i>Plain Unicode string</i> and whose <a href=#the-drag-data-item-type-string title="the drag data
+ item type string">type string</a> is equal to <var title="">format</var>.</li>
+
+ </ol><p class=note>The <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> method does
not affect whether any files were included in the drag, so the <code title=dom-DataTransfer-types><a href=#dom-datatransfer-types>types</a></code> attribute's list might
still not be empty after calling <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData()</a></code> (it would
still contain the "<code title="">Files</code>" string if any files
were included in the drag).</p>
- <p>When called with an argument, the <code title=dom-DataTransfer-clearData><a href=#dom-datatransfer-cleardata>clearData(<var title="">format</var>)</a></code> method must clear the
- <code><a href=#datatransfer>DataTransfer</a></code> object of any data associated with the
- given <var title="">format</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII
- lowercase</a>. If <var title="">format</var> (after conversion to
- lowercase) is the value "<code title="">text</code>", then it must
- be treated as "<code title="">text/plain</code>". If the <var title="">format</var> (after conversion to lowercase) is "<code title="">url</code>", then it must be treated as "<code title="">text/uri-list</code>".</p>
-
<p>The <dfn id=dom-datatransfer-setdata title=dom-DataTransfer-setData><code>setData(<var title="">format</var>, <var title="">data</var>)</code></dfn> method
- must add <var title="">data</var> to the data stored in the
- <code><a href=#datatransfer>DataTransfer</a></code> object, labeled as being of the type <var title="">format</var>, <a href=#converted-to-ascii-lowercase>converted to ASCII
- lowercase</a>. This must replace any previous data that had been
- set for that format. If <var title="">format</var> (after conversion
- to lowercase) is the value "<code title="">text</code>", then it
- must be treated as "<code title="">text/plain</code>". If the <var title="">format</var> (after conversion to lowercase) is "<code title="">url</code>", then it must be treated as "<code title="">text/uri-list</code>".</p>
+ must run the following steps:</p>
- <p>The <dfn id=dom-datatransfer-getdata title=dom-DataTransfer-getData><code>getData(<var title="">format</var>)</code></dfn> method must return the data that
- is associated with the type <var title="">format</var>
- <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>, if any, and must return
- the empty string otherwise. If <var title="">format</var> (after
- conversion to lowercase) is the value "<code title="">text</code>",
- then it must be treated as "<code title="">text/plain</code>". If
- the <var title="">format</var> (after conversion to lowercase) is
- "<code title="">url</code>", then the data associated with the
- "<code title="">text/uri-list</code>" format must be parsed as
- appropriate for <code title="">text/uri-list</code> data, and the
- first URL from the list must be returned. If there is no data with
- that format, or if there is but it has no URLs, then the method must
- return the empty string. <a href=#refsRFC2483>[RFC2483]</a></p>
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
- <p>The <dfn id=dom-datatransfer-files title=dom-DataTransfer-files><code>files</code></dfn>
- attribute must return the <code>FileList</code> object that contains
- the files that are stored in the <code><a href=#datatransfer>DataTransfer</a></code>
- object. There is one such object per <code><a href=#datatransfer>DataTransfer</a></code>
- object.</p>
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is not the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write mode</a>, abort these steps.
+ Nothing happens.</li>
- <p class=note>This version of the API does not expose the types of
+ <li><p>Let <var title="">format</var> be the first argument,
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
+
+ <li>
+
+ <p>If <var title="">format</var> equals "<code title="">text</code>", change it to "<code title="">text/plain</code>".</p>
+
+ <p>If <var title="">format</var> equals "<code title="">url</code>", change it to "<code title="">text/uri-list</code>".</p>
+
+ </li>
+
+ <li><p>Remove each item in the <a href=#drag-data-store-item-list>drag data store item
+ list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a>
+ is <i>Plain Unicode string</i> and whose <a href=#the-drag-data-item-type-string title="the drag data
+ item type string">type string</a> is equal to <var title="">format</var>.</li>
+
+ <li><p>Add an item to the <a href=#drag-data-store-item-list>drag data store item list</a>
+ whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a> is <i>Plain
+ Unicode string</i>, whose <a href=#the-drag-data-item-type-string title="the drag data item type
+ string">type string</a> is equal to <var title="">format</var>,
+ and whose data is the string given by the method's second
+ argument.</li>
+
+ </ol><p>The <dfn id=dom-datatransfer-getdata title=dom-DataTransfer-getData><code>getData(<var title="">format</var>, <var title="">data</var>)</code></dfn> method
+ must run the following steps:</p>
+
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is in the <a href=#concept-dnd-p title=concept-dnd-p>protected mode</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>Let <var title="">format</var> be the first argument,
+ <a href=#converted-to-ascii-lowercase>converted to ASCII lowercase</a>.</li>
+
+ <li><p>Let <var title="">convert-to-URL</var> be false.</li>
+
+ <li><p>If <var title="">format</var> equals "<code title="">text</code>", change it to "<code title="">text/plain</code>".</li>
+
+ <li><p>If <var title="">format</var> equals "<code title="">url</code>", change it to "<code title="">text/uri-list</code>" and set <var title="">convert-to-URL</var> to true.</li>
+
+ <li><p>If there is no item in the <a href=#drag-data-store-item-list>drag data store item
+ list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a>
+ is <i>Plain Unicode string</i> and whose <a href=#the-drag-data-item-type-string title="the drag data
+ item type string">type string</a> is equal to <var title="">format</var>, return the empty string and abort these
+ steps.</li>
+
+ <li><p>Let <var title="">result</var> be the data of the first item
+ to the <a href=#drag-data-store-item-list>drag data store item list</a> whose <a href=#the-drag-data-item-kind title="the drag data item kind">kind</a> is <i>Plain Unicode
+ string</i> and whose <a href=#the-drag-data-item-type-string title="the drag data item type
+ string">type string</a> is equal to <var title="">format</var>.</li>
+
+ <li><p>If <var title="">convert-to-URL</var> is true, then parse
+ <var title="">result</var> as appropriate for <code title="">text/uri-list</code> data, and then set <var title="">result</var> to the first URL from the list, if any, or
+ the empty string otherwise. <a href=#refsRFC2483>[RFC2483]</a></li>
+
+ <li><p>Return <var title="">result</var>.</li>
+
+ </ol><p>The <dfn id=dom-datatransfer-files title=dom-DataTransfer-files><code>files</code></dfn>
+ attribute must return a <a href=#live>live</a> <code>FileList</code>
+ sequence consisting of <code>File</code> objects representing the
+ files found by the following steps. The same object must be returned
+ each time. Furthermore, for a given <code>FileList</code> object and
+ a given underlying file, the same <code>File</code> object must be
+ used each time.</p>
+
+ <ol><li><p>Start with an empty list <var title="">L</var>.</li>
+
+ <li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, the
+ <code>FileList</code> is empty. Abort these steps; return the
+ empty list <var title="">L</var>.</li>
+
+ <li><p>For each item in the <a href=#drag-data-store-item-list>drag data store item list</a>
+ <!-- in some order...? --> whose <a href=#the-drag-data-item-kind title="the drag data item
+ kind">kind</a> is <i>File</i> (not <i>Blob</i>), add the item's
+ data (the file, in particular its name and contents, as well as its
+ <a href=#the-drag-data-item-type-string title="the drag data item type string">type</a>) to the
+ list <var title="">L</var>.</li>
+
+ <!-- <li><p>Sort the list...?</p></li> -->
+
+ <li><p>The files found by these steps are those in the list <var title="">L</var>.</li>
+
+ </ol><p class=note>This version of the API does not expose the types of
the files during the drag.</p>
- <p>The <dfn id=dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage><code>setDragImage(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method sets which element to use <a href=#base-dnd-feedback>to generate the drag feedback</a>. The
- <var title="">element</var> argument can be any
- <code><a href=#element>Element</a></code>; if it is an <code><a href=#the-img-element>img</a></code> element, then the
- user agent should use the element's image (at its intrinsic size) to
- generate the feedback, otherwise the user agent should base the
- feedback on the given element (but the exact mechanism for doing so
- is not specified).</p>
+ <p>The <dfn id=dom-datatransfer-setdragimage title=dom-DataTransfer-setDragImage><code>setDragImage(<var title="">element</var>, <var title="">x</var>, <var title="">y</var>)</code></dfn> method must run the following
+ steps:</p>
- <p>The <dfn id=dom-datatransfer-addelement title=dom-DataTransfer-addElement><code>addElement(<var title="">element</var>)</code></dfn> method is an alternative way of
- specifying how the user agent is to <a href=#base-dnd-feedback>render the drag feedback</a>. It adds an
- element to the <code><a href=#datatransfer>DataTransfer</a></code> object.</p>
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
- <p class=note>The difference between <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> and
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is not in the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write mode</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the <var title="">element</var> argument is an
+ <code><a href=#the-img-element>img</a></code> element, then set the <a href=#drag-data-store-bitmap>drag data store
+ bitmap</a> to the element's image (at its intrinsic size);
+ otherwise, set the <a href=#drag-data-store-bitmap>drag data store bitmap</a> to an image
+ generated from the given element (the exact mechanism for doing so
+ is not currently specified).</li>
+
+ <li><p>Set the <span>drag data store hot spot</span> to the given
+ <var title="">x</var>, <var title="">y</var> coordinate.</li>
+
+ </ol><p>The <dfn id=dom-datatransfer-addelement title=dom-DataTransfer-addElement><code>addElement(<var title="">element</var>)</code></dfn> method is an alternative way of
+ specifying how the user agent is to <a href=#base-dnd-feedback>render the drag feedback</a>. The method
+ must run the following steps:</p>
+
+ <ol><li><p>If the <code><a href=#datatransfer>DataTransfer</a></code> object is no longer
+ associated with a <a href=#drag-data-store>drag data store</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>If the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-mode title="drag data
+ store mode">mode</a> is not in the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write mode</a>, abort these steps.
+ Nothing happens.</li>
+
+ <li><p>Add the given <var title="">element</var> to the element's
+ <a href=#drag-data-store-elements-list>drag data store elements list</a>.</li>
+
+ </ol><p class=note>The difference between <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> and
<code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> is
that the latter automatically generates the image based on the
- current rendering of the elements added, whereas the former uses the
- exact specified image.</p>
+ current rendering of the elements added (potentially keeping it
+ updated as the drag continues, e.g. if the elements include an
+ actively playing video), whereas the former uses the exact specified
+ image at the time the method is invoked.</p>
</div>
- <h4 id=dndevents><span class=secno>8.7.3 </span>Events fired during a drag-and-drop action</h4>
- <p>The following events are involved in the drag-and-drop
- model.</p>
+ <h4 id=the-dragevent-interface><span class=secno>8.7.4 </span>The <code><a href=#dragevent>DragEvent</a></code> interface</h4>
- <div class=impl>
+ <p>The drag-and-drop processing model involves several events. They
+ all use the <code><a href=#dragevent>DragEvent</a></code> interface.</p>
- <p>Whenever the processing model described below causes one of these
- events to be fired, the event fired must use the
- <code><a href=#dragevent>DragEvent</a></code> interface defined above, must have the
- bubbling and cancelable behaviors given in the table below, and must
- have the context information set up as described after the table,
- with the <code title=dom-UIEvent-detail>detail</code> attribute
- set to zero, the mouse and key attributes set according to the state
- of the input devices as they would be for user interaction events,
- and the <code title="">relatedTarget</code> attribute set to
- null.</p>
+ <pre class=idl>interface <dfn id=dragevent>DragEvent</dfn> : <span>MouseEvent</span> {
+ readonly attribute <a href=#datatransfer>DataTransfer</a> <a href=#dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer>dataTransfer</a>;
- <p>If there is no relevant pointing device, the object must have its
- <code title="">screenX</code>, <code title="">screenY</code>, <code title="">clientX</code>, <code title="">clientY</code>, and <code title="">button</code> attributes set to 0.</p>
+ void <a href=#dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent>initDragEvent</a>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg<!-- used to be viewArg, back when we had views -->, 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 <a href=#datatransfer>DataTransfer</a> dataTransferArg);
+};</pre>
- <!-- interaction event spec point -->
+ <dl class=domintro><dt><var title="">event</var> . <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code></dt>
+ <dd>
+
+ <p>Returns the <code><a href=#datatransfer>DataTransfer</a></code> object for the event.</p>
+
+ </dd>
+
+ </dl><div class=impl>
+
+ <p>The <dfn id=dom-dragevent-initdragevent title=dom-DragEvent-initDragEvent><code>initDragEvent()</code></dfn>
+ method must initialize the event in a manner analogous to the
+ similarly-named method in the DOM Events interfaces, except that the
+ <var title="">dummyArg</var> argument must be ignored. <a href=#refsDOMEVENTS>[DOMEVENTS]</a></p>
+
+ <p>The <dfn id=dom-dragevent-datatransfer title=dom-DragEvent-dataTransfer><code>dataTransfer</code></dfn>
+ attribute of the <code><a href=#dragevent>DragEvent</a></code> interface represents the
+ context information for the event.</p>
+
</div>
- <table><thead><tr><th> Event Name </th>
- <th> Target </th>
- <th> Bubbles? </th>
- <th> Cancelable? </th>
- <th> <code title=dom-DataTransfer-dataTransfer>dataTransfer</code> </th>
- <th> <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> </th>
- <th> <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> </th>
- <th> Default Action </th>
- <tbody><tr><td><dfn id=event-dragstart title=event-dragstart><code>dragstart</code></dfn></td>
- <td><a href=#source-node>Source node</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Contains <a href=#source-node>source node</a> unless a selection is being dragged, in which case it is empty; <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> returns any files included in the drag operation</td>
- <td><code title="">uninitialized</code></td>
- <td><code title="">none</code></td>
- <td>Initiate the drag-and-drop operation</td>
- <tr><td><dfn id=event-drag title=event-drag><code>drag</code></dfn></td>
- <td><a href=#source-node>Source node</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><code title="">none</code></td>
- <td>Continue the drag-and-drop operation</td>
- <tr><td><dfn id=event-dragenter title=event-dragenter><code>dragenter</code></dfn></td>
- <td><a href=#immediate-user-selection>Immediate user selection</a> or <a href=#the-body-element>the body element</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
- <td>Reject <a href=#immediate-user-selection>immediate user selection</a> as potential <a href=#current-target-element title="current target element">target element</a></td>
- <tr><td><dfn id=event-dragleave title=event-dragleave><code>dragleave</code></dfn></td>
- <td><a href=#current-target-element title="current target element">Previous target element</a></td>
- <td>✓ Bubbles</td>
- <td>—</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><code title="">none</code></td>
- <td>None</td>
- <tr><td><dfn id=event-dragover title=event-dragover><code>dragover</code></dfn></td>
- <td><a href=#current-target-element>Current target element</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
- <td>Reset the <a href=#current-drag-operation>current drag operation</a> to "none"</td>
- <tr><td><dfn id=event-drop title=event-drop><code>drop</code></dfn></td>
- <td><a href=#current-target-element>Current target element</a></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td><code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> returns data set in <code title=dom-dragstart>dragstart</code> event; <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> returns any files included in the drag operation</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><a href=#current-drag-operation>Current drag operation</a></td>
- <td>Varies</td>
- <tr><td><dfn id=event-dragend title=event-dragend><code>dragend</code></dfn></td>
- <td><a href=#source-node>Source node</a></td>
- <td>✓ Bubbles</td>
- <td>—</td>
- <td>Empty</td>
- <td><a href=#effectAllowed-initialization>Same as last event</a></td>
- <td><a href=#current-drag-operation>Current drag operation</a></td>
- <td>Varies</td>
- </table><p class=note>"Empty" in the table above means that the <code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> and <code title=dom-dataTransfer-files><a href=#dom-datatransfer-files>files</a></code> attributes act as if
- there is no data being dragged.</p>
-
<div class=impl>
- <p>The <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
- object's contents are empty (the <code title=dom-datatransfer-getdata><a href=#dom-datatransfer-getdata>getData()</a></code> and <code title=dom-dataTransfer-files><a href=#dom-datatransfer-files>files</a></code> attributes act as if
- there is no data being dragged) except for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> events and <code title=event-drop><a href=#event-drop>drop</a></code> events, for which the contents are
- set as described in the processing model, below.</p>
+ <p>When a user agent is required to <dfn id=fire-a-dnd-event>fire a DND event</dfn>
+ named <var title="">e</var> at an element, using a particular
+ <a href=#drag-data-store>drag data store</a>, the user agent must run the following
+ steps:</p>
- <p id=effectAllowed-initialization>The <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
- attribute must be set to "<code title="">uninitialized</code>" for
- <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> events, and to
- whatever value the field had after the last drag-and-drop event was
- fired for all other events (only counting events fired by the user
- agent for the purposes of the drag-and-drop model described
- below).</p>
+ <ol><li>
- <p id=dropEffect-initialization>The <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute must
- be set to "<code title="">none</code>" for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>, <code title=event-drag><a href=#event-drag>drag</a></code>, and <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> events (except when stated
- otherwise in the algorithms given in the sections below), to the
- value corresponding to the <a href=#current-drag-operation>current drag operation</a> for
- <code title=event-drop><a href=#event-drop>drop</a></code> and <code title=event-dragend><a href=#event-dragend>dragend</a></code> events, and to a value based on
- the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
- attribute's value and to the drag-and-drop source, as given by the
- following table, for the remaining events (<code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> and <code title=event-dragover><a href=#event-dragover>dragover</a></code>):</p>
+ <p>If <var title="">e</var> is <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>, set the <a href=#drag-data-store-mode>drag data
+ store mode</a> to the <a href=#concept-dnd-rw title=concept-dnd-rw>read/write
+ mode</a>.</p>
- <table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
- <th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
- </thead><tr><td><code title="">none</code></td>
- <td><code title="">none</code></td>
- <tr><td><code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">all</code></td>
- <td><code title="">copy</code></td>
- <tr><td><code title="">link</code>, <code title="">linkMove</code></td>
- <td><code title="">link</code></td>
- <tr><td><code title="">move</code></td>
- <td><code title="">move</code></td>
- <tr><td><code title="">uninitialized</code> when what is being dragged is a selection from a text field</td>
- <td><code title="">move</code></td>
- <tr><td><code title="">uninitialized</code> when what is being dragged is a selection</td>
- <td><code title="">copy</code></td>
- <tr><td><code title="">uninitialized</code> when what is being dragged is an <code><a href=#the-a-element>a</a></code> element with an <code>href</code> attribute</td>
- <td><code title="">link</code></td>
- <tr><td>Any other case</td>
- <td><code title="">copy</code></td>
- </table></div>
+ <p>If <var title="">e</var> is <code title=event-drop><a href=#event-drop>drop</a></code>, set the <a href=#drag-data-store-mode>drag data store
+ mode</a> to the <a href=#concept-dnd-ro title=concept-dnd-ro>read-only
+ mode</a>.</p>
+ </li>
+ <li><p>Let <var title="">dataTransfer</var> be a newly created
+ <code><a href=#datatransfer>DataTransfer</a></code> object associated with the given
+ <a href=#drag-data-store>drag data store</a>.</li>
+
+ <li><p id=effectAllowed-initialization>Set the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute to the <a href=#drag-data-store>drag data store</a>'s <a href=#drag-data-store-allowed-effects-state>drag data
+ store allowed effects state</a>.</li>
+
+ <li>
+
+ <p id=dropEffect-initialization>Set the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute to
+ "<code title="">none</code>" if <var title="">e</var> is <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code>, <code title=event-drag><a href=#event-drag>drag</a></code>, or <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code>; to the value
+ corresponding to the <a href=#current-drag-operation>current drag operation</a> if <var title="">e</var> is <code title=event-drop><a href=#event-drop>drop</a></code> or <code title=event-dragend><a href=#event-dragend>dragend</a></code>; and to a value based on the
+ <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute's value and to the drag-and-drop source, as given by the
+ following table, otherwise (i.e. if <var title="">e</var> is <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> or <code title=event-dragover><a href=#event-dragover>dragover</a></code>):</p>
+
+ <table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
+ <th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
+ </thead><tr><td>"<code title="">none</code>"</td>
+ <td>"<code title="">none</code>"</td>
+ <tr><td>"<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", "<code title="">all</code>"</td>
+ <td>"<code title="">copy</code>"</td>
+ <tr><td>"<code title="">link</code>", "<code title="">linkMove</code>"</td>
+ <td>"<code title="">link</code>"</td>
+ <tr><td>"<code title="">move</code>"</td>
+ <td>"<code title="">move</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>" when what is being dragged is a selection from a text field</td>
+ <td>"<code title="">move</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>" when what is being dragged is a selection</td>
+ <td>"<code title="">copy</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>" when what is being dragged is an <code><a href=#the-a-element>a</a></code> element with an <code>href</code> attribute</td>
+ <td>"<code title="">link</code>"</td>
+ <tr><td>Any other case</td>
+ <td>"<code title="">copy</code>"</td>
+ </table></li>
+
+ <li>
+
+ <p>Create a <code><a href=#dragevent>DragEvent</a></code> object and initialize it to
+ have the given name <var title="">e</var>, to bubble, to be
+ cancelable unless <var title="">e</var> is <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> or <code title=event-dragend><a href=#event-dragend>dragend</a></code>, and to have the <code title=dom-UIEvent-detail>detail</code> attribute set to zero,
+ the mouse and key attributes set according to the state of the
+ input devices as they would be for user interaction events, the
+ <code title="">relatedTarget</code> attribute set to null, and the
+ <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
+ attribute set to <var title="">dataTransfer</var>, the
+ <code><a href=#datatransfer>DataTransfer</a></code> object created above.</p>
+
+ <!-- interaction event spec point -->
+
+ <p>If there is no relevant pointing device, the object must have
+ its <code title="">screenX</code>, <code title="">screenY</code>,
+ <code title="">clientX</code>, <code title="">clientY</code>, and
+ <code title="">button</code> attributes set to 0.</p>
+
+ </li>
+
+ <li><p>Dispatch the newly created <code><a href=#dragevent>DragEvent</a></code> object at
+ the specified target element.</li>
+
+ <li><p>Set the <a href=#drag-data-store-allowed-effects-state>drag data store allowed effects state</a>
+ to the current value of <var title="">dataTransfer</var>'s <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute.</li>
+
+ <li><p>Set the <a href=#drag-data-store-mode>drag data store mode</a> back to the <a href=#concept-dnd-p title=concept-dnd-p>protected mode</a> if it was changed in
+ the first step.</li>
+
+ </ol></div>
+
+
<div class=impl>
- <h4 id=drag-and-drop-processing-model><span class=secno>8.7.4 </span>Drag-and-drop processing model</h4>
+ <h4 id=drag-and-drop-processing-model><span class=secno>8.7.5 </span>Drag-and-drop processing model</h4>
<p>When the user attempts to begin a drag operation, the user agent
- must first determine what is being dragged. If the drag operation
- was invoked on a selection, then it is the selection that is being
- dragged. Otherwise, it is the first element, going up the ancestor
- chain, starting at the node that the user tried to drag, that has
- the IDL attribute <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> set
- to true. If there is no such element, then nothing is being dragged,
- the drag-and-drop operation is never started, and the user agent
- must not continue with this algorithm.</p>
+ must run the following steps. User agents must act as if these steps
+ were run even if the drag actually started in another document or
+ application and the user agent was not aware that the drag was
+ occuring until it intersected with a document under the user agent's
+ purview.</p>
- <p class=note><code><a href=#the-img-element>img</a></code> elements and <code><a href=#the-a-element>a</a></code>
- elements with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
- attribute have their <code title=dom-draggable><a href=#dom-draggable>draggable</a></code>
- attribute set to true by default.</p>
+ <ol><li>
- <p>If the user agent determines that something can be dragged, a
- <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event must then be
- fired at the <a href=#source-node>source node</a>.</p>
+ <p>Determine what is being dragged, as follows:</p>
- <p>The <dfn id=source-node>source node</dfn> depends on the kind of drag and how it
- was initiated. If it is a selection that is being dragged, then the
- <a href=#source-node>source node</a> is the text node that the user started the
- drag on (typically the text node that the user originally
- clicked). If the user did not specify a particular node, for example
- if the user just told the user agent to begin a drag of "the
- selection", then the <a href=#source-node>source node</a> is the first text node
- containing a part of the selection. If it is not a selection that is
- being dragged, then the <a href=#source-node>source node</a> is the element that
- is being dragged.</p>
+ <p>If the drag operation was invoked on a selection, then it is
+ the selection that is being dragged.</p>
- <p>Multiple events are fired on the <a href=#source-node>source node</a> during
- the course of the drag-and-drop operation.</p>
+ <p>Otherwise, if the drag operation was invoked on a
+ <code><a href=#document>Document</a></code>, it is the first element, going up the
+ ancestor chain, starting at the node that the user tried to drag,
+ that has the IDL attribute <code title=dom-draggable><a href=#dom-draggable>draggable</a></code> set to true. If there is no
+ such element, then nothing is being dragged; abort these steps,
+ the drag-and-drop operation is never started.</p>
- <hr><p>The <dfn id=list-of-dragged-nodes>list of dragged nodes</dfn> also depends on the kind of
- drag. If it is a selection that is being dragged, then the
- <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains, in <a href=#tree-order>tree
- order</a>, every node that is partially or completely included in
- the selection (including all their ancestors). Otherwise, the
- <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains only the <a href=#source-node>source
- node</a>.</p>
+ <p>Otherwise, the drag operation was invoked outside the user
+ agent's purview. What is being dragged is defined by the document
+ or application where the drag was started.</p>
- <hr><p>If it is a selection that is being dragged, the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member of the
- event must be created with no nodes. Otherwise, it must be created
- containing just the <a href=#source-node>source node</a>. Script can use the
- <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> method
- to add further elements to the list of what is being dragged. (This
- list is only used for rendering the drag feedback.)</p>
+ <p class=note><code><a href=#the-img-element>img</a></code> elements and <code><a href=#the-a-element>a</a></code>
+ elements with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>
+ attribute have their <code title=dom-draggable><a href=#dom-draggable>draggable</a></code>
+ attribute set to true by default.</p>
- <p>The <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
- member of the event also has data added to it, as follows:</p>
+ </li>
- <ul><li>
+ <li><p><a href=#create-a-drag-data-store>Create a drag data store</a>. All the DND events
+ fired subsequently by this algorithm must use this <a href=#drag-data-store>drag data
+ store</a>.</li>
- <p>If it is a selection that is being dragged, then the user agent
- must add the text of the selection to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
- associated with the <code title="">text/plain</code> format.</p>
+ <li>
+ <p>Establish which DOM node is the <dfn id=source-node>source node</dfn>, as
+ follows:</p>
+
+ <p>If it is a selection that is being dragged, then the
+ <a href=#source-node>source node</a> is the text node that the user started
+ the drag on (typically the text node that the user originally
+ clicked). If the user did not specify a particular node, for
+ example if the user just told the user agent to begin a drag of
+ "the selection", then the <a href=#source-node>source node</a> is the first
+ text node containing a part of the selection.</p>
+
+ <p>Otherwise, if it is an element that is being dragged, then the
+ <a href=#source-node>source node</a> is the element that is being dragged.</p>
+
+ <p>Otherwise, the <a href=#source-node>source node</a> is part of another
+ document or application, and user agents must not actually fire
+ events at it when this algorithm requires that they do so.</p>
+
+ <p class=note>Multiple events are fired on the <a href=#source-node>source
+ node</a> during the course of the drag-and-drop operation.</p>
+
</li>
<li>
- <p>If files are being dragged, then the user agent must add the
- files to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member's
- <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> attribute's
- <code>FileList</code> object. (Dragging files can only happen from
+ <p>Determine the <dfn id=list-of-dragged-nodes>list of dragged nodes</dfn>, as follows:</p>
+
+ <p>If it is a selection that is being dragged, then the <a href=#list-of-dragged-nodes>list
+ of dragged nodes</a> contains, in <a href=#tree-order>tree order</a>,
+ every node that is partially or completely included in the
+ selection (including all their ancestors).</p>
+
+ <p>Otherwise, the <a href=#list-of-dragged-nodes>list of dragged nodes</a> contains only
+ the <a href=#source-node>source node</a>, if any.</p>
+
+ </li>
+
+ <li>
+
+ <p>If it is a selection that is being dragged, then add an item to
+ the <a href=#drag-data-store-item-list>drag data store item list</a>, with its properties
+ set as follows:</p>
+
+ <dl><dt><a href=#the-drag-data-item-type-string>The drag data item type string</a>
+ <dd>"<code>text/plain</code>"</dd>
+
+ <dt><a href=#the-drag-data-item-kind>The drag data item kind</a>
+ <dd><i>Plain Unicode string</i></dd>
+
+ <dt>The actual data</dt>
+ <dd>The text of the selection</dd>
+
+ </dl><p>Otherwise, if any files are being dragged, then add one item
+ per file to the <a href=#drag-data-store-item-list>drag data store item list</a>, with their
+ properties set as follows:</p>
+
+ <dl><dt><a href=#the-drag-data-item-type-string>The drag data item type string</a>
+ <dd>The MIME type of the file, if known, or "<code>application/octet-stream</code>" otherwise.</dd>
+
+ <dt><a href=#the-drag-data-item-kind>The drag data item kind</a>
+ <dd><i>File</i></dd>
+
+ <dt>The actual data</dt>
+ <dd>The file's contents and name.</dd>
+
+ </dl><p class=note>Dragging files can currently only happen from
outside a <a href=#browsing-context>browsing context</a>, for example from a file
- system manager application, and thus the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event is actually implied
- in this case.)</p>
+ system manager application.</p>
</li>
+ <!-- v2: text/html as an export format -->
+
<!--MD-->
<li>
- <p>The user agent must take the <a href=#list-of-dragged-nodes>list of dragged nodes</a>
- and <a href=#extracting-json title="extracting JSON">extract the microdata from those
- nodes into a JSON form</a>, and then must add the resulting
- string to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
- associated with the <code title="">application/microdata+json</code> format.</p>
+ <p>If the <a href=#list-of-dragged-nodes>list of dragged nodes</a> is not empty, then
+ <a href=#extracting-json title="extracting JSON">extract the microdata from those
+ nodes into a JSON form</a>, and add one item to the <a href=#drag-data-store-item-list>drag
+ data store item list</a>, with its properties set as
+ follows:</p>
- </li>
+ <dl><dt><a href=#the-drag-data-item-type-string>The drag data item type string</a>
+ <dd><code><a href=#application/microdata+json>application/microdata+json</a></code></dd>
+ <dt><a href=#the-drag-data-item-kind>The drag data item kind</a>
+ <dd><i>Plain Unicode string</i></dd>
+ <dt>The actual data</dt>
+ <dd>The resulting JSON string.</dd>
+
+ </dl></li>
+
+
<!-- v2: deal with multiple vCards -->
<!--
<li>
+ (if you put this back, don't forget to update this text as above)
+
<p>The user agent must take the <span>list of dragged nodes</span>
and <span title="extracting a vCard">extract the vCard data from
those nodes</span>, and then must add the resulting string to the
@@ -66515,6 +66695,8 @@
<li>
+ (if you put this back, don't forget to update this text as above)
+
<p>The user agent must take the <span>list of dragged nodes</span>
and <span title="extracting vEvent data">extract the vEvent data
from those nodes</span>, and then must add the resulting string to
@@ -66525,11 +66707,9 @@
</li>
-->
- <!-- v2: text/html -->
-
<li>
- <p>The user agent must run the following steps:</p>
+ <p>Run the following substeps:</p>
<ol><li><p>Let <var title="">urls</var> be an empty list of <a href=#absolute-url title="absolute URL">absolute URLs</a>.</li>
@@ -66538,87 +66718,118 @@
<p>For each <var title="">node</var> in the <a href=#list-of-dragged-nodes>list of
dragged nodes</a>:</p>
- <dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code></dt>
+ <dl><dt>If the node is an <code><a href=#the-a-element>a</a></code> element with an <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> attribute</dt>
- <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute relative to
- the element.</dd>
+ <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code> content attribute
+ relative to the element.</dd>
- <dt>If the node is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-src><a href=#attr-img-src>src</a></code></dt>
+ <dt>If the node is an <code><a href=#the-img-element>img</a></code> element with an <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute</dt>
- <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> content attribute relative to the
- element.</dd>
+ <dd>Add to <var title="">urls</var> the result of <a href=#resolve-a-url title="resolve a url">resolving</a> the element's <code title=attr-img-src><a href=#attr-img-src>src</a></code> content attribute relative to
+ the element.</dd>
<!-- v2: more -->
</dl></li>
<li><p>If <var title="">urls</var> is still empty, abort these
- steps.</li>
+ substeps.</li>
<li><p>Let <var title="">url string</var> be the result of
concatenating the strings in <var title="">urls</var>, in the
order they were added, separated by a U+000D CARRIAGE RETURN
U+000A LINE FEED character pair (CRLF).</li>
- <li><p>Add <var title="">url string</var> to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> member,
- associated with the <code title="">text/uri-list</code>
- format.</li>
+ <li><p>Add one item to the <a href=#drag-data-store-item-list>drag data store item
+ list</a>, with its properties set as follows:</p>
+ <dl><dt><a href=#the-drag-data-item-type-string>The drag data item type string</a>
+ <dd><code>text/uri-list</code></dd>
+
+ <dt><a href=#the-drag-data-item-kind>The drag data item kind</a>
+ <dd><i>Plain Unicode string</i></dd>
+
+ <dt>The actual data</dt>
+ <dd><var title="">url string</var></dd>
+
+ </dl></li>
+
</ol></li>
- </ul><hr><p>If the event is canceled, then the drag-and-drop operation must
- not occur; the user agent must not continue with this algorithm.</p>
+ <li>
- <p>If it is not canceled, then the drag-and-drop operation must be
- initiated.</p>
+ <p>If it is an element that is being dragged, then set the
+ <span>drag data store list of elements</span> to contain just the
+ <a href=#source-node>source node</a>.</p>
- <p class=note>Since events with no event listeners registered are,
- almost by definition, never canceled, drag-and-drop is always
- available to the user if the author does not specifically prevent
- it.</p>
+ <p>Otherwise, update the <a href=#drag-data-store-default-feedback>drag data store default
+ feedback</a> as appropriate for the user agent (if the user is
+ dragging the selection, then the selection would likely be the
+ basis for this feedback).</p>
- <p id=base-dnd-feedback>The drag-and-drop feedback must be
- generated from the first of the following sources that is
- available:</p>
+ <p class=note>Script can use the <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code> method to
+ add further elements to the list of what is being dragged. (This
+ list is only used for rendering the drag feedback.)</p>
- <ol><li>The element specified in the last call to the <code title=dom-DataTransfer-setDragImage><a href=#dom-datatransfer-setdragimage>setDragImage()</a></code> method
- of the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
- object of the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event,
- if the method was called. In visual media, if this is used, the
- <var title="">x</var> and <var title="">y</var> arguments that were
- passed to that method should be used as hints for where to put the
- cursor relative to the resulting image. The values are expressed as
- distances in CSS pixels from the left side and from the top side of
- the image respectively. <a href=#refsCSS>[CSS]</a></li>
+ </li>
- <li>The elements that were added to the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object, both
- before the event was fired, and during the handling of the event
- using the <code title=dom-DataTransfer-addElement><a href=#dom-datatransfer-addelement>addElement()</a></code>
- method, if any such elements were indeed added.</li>
+ <li>
- <li>The selection that the user is dragging.</li>
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> at the <a href=#source-node>source
+ node</a>.</p>
- </ol><p>The user agent must take a note of <a href=#dom-datatransfer-setdata title=dom-DataTransfer-setData>the data that was placed</a> in
- the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code>
- object. This data will be made available again when the <code title=event-drop><a href=#event-drop>drop</a></code> event is fired.</p>
+ <p>If the event is canceled, then the drag-and-drop operation
+ should not occur; abort these steps.</p> <!-- only a should
+ because the UA can always allow the user to drag without the page
+ knowing -->
- <p>From this point until the end of the drag-and-drop operation,
- device input events (e.g. mouse and keyboard events) must be
- suppressed. In addition, the user agent must track all DOM changes
- made during the drag-and-drop operation, and add them to its <a href=#undo>undo history</a> as one atomic operation once the
+ <p class=note>Since events with no event listeners registered
+ are, almost by definition, never canceled, drag-and-drop is always
+ available to the user if the author does not specifically prevent
+ it.</p>
+
+ </li>
+
+ <li>
+
+ <p><a href=#initiate-the-drag-and-drop-operation>Initiate the drag-and-drop operation</a> in a manner
+ consistent with platform conventions, and as described below.</p>
+
+ <p id=base-dnd-feedback>The drag-and-drop feedback must be
+ generated from the first of the following sources that is
+ available:</p>
+
+ <ol><li>The <a href=#drag-data-store-bitmap>drag data store bitmap</a>, if any. In this
+ case, the <a href=#drag-data-store-hot-spot-coordinate>drag data store hot spot coordinate</a> should
+ be used as hints for where to put the cursor relative to the
+ resulting image. The values are expressed as distances in CSS
+ pixels from the left side and from the top side of the image
+ respectively. <a href=#refsCSS>[CSS]</a></li>
+
+ <li>The elements in the <span>drag data store element
+ list</span>, if any.</li>
+
+ <li>The <a href=#drag-data-store-default-feedback>drag data store default feedback</a>.</li>
+
+ </ol></li>
+
+ </ol><p>From the moment that the user agent is to <dfn id=initiate-the-drag-and-drop-operation>initiate the
+ drag-and-drop operation</dfn>, until the end of the drag-and-drop
+ operation, device input events (e.g. mouse and keyboard events) must
+ be suppressed. In addition, the user agent must track all DOM
+ changes made during the drag-and-drop operation, and add them to its
+ <a href=#undo>undo history</a> as one atomic operation once the
drag-and-drop operation has ended.</p>
<p>During the drag operation, the element directly indicated by the
user as the drop target is called the <dfn id=immediate-user-selection>immediate user
selection</dfn>. (Only elements can be selected by the user; other
- nodes must not be made available as drop targets.)
+ nodes must not be made available as drop targets.) However, the
+ <a href=#immediate-user-selection>immediate user selection</a> is not necessarily the
+ <dfn id=current-target-element>current target element</dfn>, which is the element currently
+ selected for the drop part of the drag-and-drop operation.</p>
- However, the <a href=#immediate-user-selection>immediate user selection</a> is not
- necessarily the <dfn id=current-target-element>current target element</dfn>, which is the
- element currently selected for the drop part of the drag-and-drop
- operation.
-
- The <a href=#immediate-user-selection>immediate user selection</a> changes as the user
+ <p>The <a href=#immediate-user-selection>immediate user selection</a> changes as the user
selects different elements (either by pointing at them with a
pointing device, or by selecting them in some other way). The
<a href=#current-target-element>current target element</a> changes when the <a href=#immediate-user-selection>immediate
@@ -66633,11 +66844,10 @@
<a href=#current-target-element>current target element</a> is initially null.</p>
<p>In addition, there is also a <dfn id=current-drag-operation>current drag operation</dfn>,
- which can take on the values "none", "copy", "link", and "move".
- Initially, it has the value "none". It is updated by the user agent
- as described in the steps below.</p>
+ which can take on the values "<code title="">none</code>", "<code title="">copy</code>", "<code title="">link</code>", and "<code title="">move</code>". Initially, it has the value "<code title="">none</code>". It is updated by the user agent as described
+ in the steps below.</p>
- <p>User agents must, as soon as the drag operation is initiated and
+ <p>User agents must, as soon as the drag operation is <a href=#initiate-the-drag-and-drop-operation title="initiate the drag-and-drop operation">initiated</a> and
every 350ms (±200ms) thereafter for as long as the drag
operation is ongoing, <a href=#queue-a-task>queue a task</a> to perform the
following steps in sequence:</p>
@@ -66645,55 +66855,54 @@
<ol><li>
<p>If the user agent is still performing the previous iteration of
- the sequence (if any) when the next iteration becomes due, the
- user agent must not execute the overdue iteration, effectively
- "skipping missed frames" of the drag-and-drop operation.</p>
+ the sequence (if any) when the next iteration becomes due, abort
+ these steps for this iteration (effectively "skipping missed
+ frames" of the drag-and-drop operation).</p>
</li>
<li>
- <p>The user agent must fire a <code title=event-drag><a href=#event-drag>drag</a></code>
- event at the <a href=#source-node>source node</a>. If this event is canceled,
- the user agent must set the <a href=#current-drag-operation>current drag operation</a> to
- none (no drag operation).</p>
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-drag><a href=#event-drag>drag</a></code> event at the <a href=#source-node>source
+ node</a>. If this event is canceled, the user agent must set
+ the <a href=#current-drag-operation>current drag operation</a> to "<code title="">none</code>" (no drag operation).</p>
</li>
<li>
- <p>Next, if the <code title=event-drag><a href=#event-drag>drag</a></code> event was not
+ <p>If the <code title=event-drag><a href=#event-drag>drag</a></code> event was not
canceled and the user has not ended the drag-and-drop operation,
- the user agent must check the state of the drag-and-drop
- operation, as follows:</p>
+ check the state of the drag-and-drop operation, as follows:</p>
<ol><li>
- <p>First, if the user is indicating a different <a href=#immediate-user-selection>immediate
- user selection</a> than during the last iteration (or if this
- is the first iteration), and if this <a href=#immediate-user-selection>immediate user
+ <p>If the user is indicating a different <a href=#immediate-user-selection>immediate user
+ selection</a> than during the last iteration (or if this is
+ the first iteration), and if this <a href=#immediate-user-selection>immediate user
selection</a> is not the same as the <a href=#current-target-element>current target
- element</a>, then the <a href=#current-target-element>current target element</a> must
- be updated, as follows:</p>
+ element</a>, then update the <a href=#current-target-element>current target
+ element</a> as follows:</p>
<dl class=switch><dt>If the new <a href=#immediate-user-selection>immediate user selection</a> is null, or
is in a non-DOM document or application</dt>
- <dd><p>The user agent must set the <a href=#current-target-element>current target
- element</a> to the same value.</dd>
+ <dd><p>Set the <a href=#current-target-element>current target element</a> to the same
+ value.</dd>
<dt>Otherwise</dt>
<dd>
- <p>The user agent must fire a <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event at the
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> at the
<a href=#immediate-user-selection>immediate user selection</a>.</p>
- <p>If the event is canceled, then the <a href=#current-target-element>current target
- element</a> must be set to the <a href=#immediate-user-selection>immediate user
+ <p>If the event is canceled, then set the <a href=#current-target-element>current target
+ element</a> to the <a href=#immediate-user-selection>immediate user
selection</a>.</p>
- <p>Otherwise, the user agent must act as follows:</p>
+ <p>Otherwise, run the appropriate step from the following
+ list:</p>
<dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text
field (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code>
@@ -66701,26 +66910,31 @@
attribute is in the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
<a href=#editable>editable</a> element</dt>
- <dd><p>The <a href=#current-target-element>current target element</a> must be set to
- the <a href=#immediate-user-selection>immediate user selection</a> anyway.</dd>
+ <dd><p>Set the <a href=#current-target-element>current target element</a> to the
+ <a href=#immediate-user-selection>immediate user selection</a> anyway.</dd>
<dt>If the <a href=#current-target-element>current target element</a> is
<a href=#the-body-element>the body element</a></dt>
- <dd><p>The <a href=#current-target-element>current target element</a> is left
+ <dd><p>Leave the <a href=#current-target-element>current target element</a>
unchanged.</dd>
<dt>Otherwise</dt>
- <dd><p>The user agent must fire a <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event at <a href=#the-body-element>the
- body element</a>, and the <a href=#current-target-element>current target
- element</a> must be set to <a href=#the-body-element>the body element</a>,
- regardless of whether that event was canceled or not. (If
- <a href=#the-body-element>the body element</a> is null, then the <a href=#current-target-element>current
- target element</a> would be set to null too in this case,
- it wouldn't be set to the <code><a href=#document>Document</a></code>
- object.)</dd>
+ <dd>
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> at <a href=#the-body-element>the body
+ element</a>, and set the <a href=#current-target-element>current target
+ element</a> to <a href=#the-body-element>the body element</a>, regardless
+ of whether that event was canceled or not.</p>
+
+ <p class=note>If <a href=#the-body-element>the body element</a> is null,
+ then the event will be fired at the <code><a href=#document>Document</a></code>
+ object (as required by the definition of <a href=#the-body-element>the body
+ element</a>), but the <a href=#current-target-element>current target element</a>
+ would be set to null, not the <code><a href=#document>Document</a></code>
+ object.</dd>
+
</dl></dd>
</dl></li>
@@ -66729,20 +66943,21 @@
<p>If the previous step caused the <a href=#current-target-element>current target
element</a> to change, and if the previous target element was
- not null or a part of a non-DOM document, the user agent must fire
- a <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event at the
- previous target element.</p>
+ not null or a part of a non-DOM document, then <a href=#fire-a-dnd-event>fire a DND
+ event</a> named <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> at the previous target
+ element.</p>
</li>
<li>
<p>If the <a href=#current-target-element>current target element</a> is a DOM element,
- the user agent must fire a <code title=event-dragover><a href=#event-dragover>dragover</a></code> event at this <a href=#current-target-element>current
+ then <a href=#fire-a-dnd-event>fire a DND event</a> named <code title=event-dragover><a href=#event-dragover>dragover</a></code> at this <a href=#current-target-element>current
target element</a>.</p>
<p>If the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event is
- not canceled, the user agent must act as follows:</p>
+ not canceled, run the appropriate step from the following
+ list:</p>
<dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
(e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
@@ -66750,59 +66965,59 @@
the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
<a href=#editable>editable</a> element</dt>
- <dd><p>The user agent must set the <a href=#current-drag-operation>current drag
- operation</a> to either "copy" or "move", as appropriate
- given the platform conventions.</dd>
+ <dd><p>Set the <a href=#current-drag-operation>current drag operation</a> to either
+ "<code title="">copy</code>" or "<code title="">move</code>",
+ as appropriate given the platform conventions.</dd>
<dt>Otherwise</dt>
- <dd><p>The user agent must reset the <a href=#current-drag-operation>current drag
- operation</a> to "none".</dd>
+ <dd><p>Reset the <a href=#current-drag-operation>current drag operation</a> to "<code title="">none</code>".</dd>
</dl><p>Otherwise (if the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event <em>is</em>
- canceled), the <a href=#current-drag-operation>current drag operation</a> must be set
- based on the values the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> and
+ canceled), set the <a href=#current-drag-operation>current drag operation</a> based on
+ the values of the <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code> and
<code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
- attributes of the <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
- had after the event was handled, as per the following table:</p>
+ attributes of the <code><a href=#dragevent>DragEvent</a></code> object's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object as
+ they stood after the event dispatch finished, as per the
+ following table:</p>
<table><thead><tr><th><code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code></th>
<th><code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code></th>
<th>Drag operation</th>
- </thead><tr><td><code title="">uninitialized</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, or <code title="">all</code></td>
- <td><code title="">copy</code></td>
- <td>"copy"</td>
- <tr><td><code title="">uninitialized</code>, <code title="">link</code>, <code title="">copyLink</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
- <td><code title="">link</code></td>
- <td>"link"</td>
- <tr><td><code title="">uninitialized</code>, <code title="">move</code>, <code title="">copyMove</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
- <td><code title="">move</code></td>
- <td>"move"</td>
+ </thead><tr><td>"<code title="">uninitialized</code>", "<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">copy</code>"</td>
+ <td>"<code title="">copy</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>", "<code title="">link</code>", "<code title="">copyLink</code>", "<code title="">linkMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">link</code>"</td>
+ <td>"<code title="">link</code>"</td>
+ <tr><td>"<code title="">uninitialized</code>", "<code title="">move</code>", "<code title="">copyMove</code>", "<code title="">linkMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">move</code>"</td>
+ <td>"<code title="">move</code>"</td>
<tr><td colspan=2>Any other case</td>
- <td>"none"</td>
+ <td>"<code title="">none</code>"</td>
</table><p>Then, regardless of whether the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event was canceled or
- not, the drag feedback (e.g. the mouse cursor) must be updated
- to match the <a href=#current-drag-operation>current drag operation</a>, as
- follows:</p>
+ not, update the drag feedback (e.g. the mouse cursor) to match
+ the <a href=#current-drag-operation>current drag operation</a>, as follows:</p>
<table><thead><tr><th>Drag operation</th>
<th>Feedback</th>
- </thead><tr><td>"copy"</td>
+ </thead><tr><td>"<code title="">copy</code>"</td>
<td>Data will be copied if dropped here.</td>
- <tr><td>"link"</td>
+ <tr><td>"<code title="">link</code>"</td>
<td>Data will be linked if dropped here.</td>
- <tr><td>"move"</td>
+ <tr><td>"<code title="">move</code>"</td>
<td>Data will be moved if dropped here.</td>
- <tr><td>"none"</td>
+ <tr><td>"<code title="">none</code>"</td>
<td>No operation allowed, dropping here will cancel the drag-and-drop operation.</td>
</table></li>
<li>
- <p>Otherwise, if the <a href=#current-target-element>current target element</a> is not a
- DOM element, the user agent must use platform-specific mechanisms
- to determine what drag operation is being performed (none, copy,
- link, or move). This sets the <em>current drag operation</em>.</p>
+ <p>Otherwise, if the <a href=#current-target-element>current target element</a> is not
+ a DOM element, use platform-specific mechanisms to determine
+ what drag operation is being performed (none, copy, link, or
+ move), and set the <i><a href=#current-drag-operation>current drag operation</a></i>
+ accordingly.</p>
</li>
@@ -66813,90 +67028,88 @@
<p>Otherwise, if the user ended the drag-and-drop operation (e.g.
by releasing the mouse button in a mouse-driven drag-and-drop
interface), or if the <code title=event-drag><a href=#event-drag>drag</a></code> event
- was canceled, then this will be the last iteration. The user agent
- must execute the following steps, then stop looping.</p>
+ was canceled, then this will be the last iteration. Run the
+ following steps, then stop the drag-and-drop operation:</p>
<ol><li>
- <p>If the <a href=#current-drag-operation>current drag operation</a> is none (no drag
- operation), or, if the user ended the drag-and-drop operation by
- canceling it (e.g. by hitting the <kbd>Escape</kbd> key), or if
- the <a href=#current-target-element>current target element</a> is null, then the drag
- operation failed. If the <a href=#current-target-element>current target element</a> is
- a DOM element, the user agent must fire a <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> event at it; otherwise,
- if it is not null, it must use platform-specific conventions for
- drag cancellation.</p>
+ <p>If the <a href=#current-drag-operation>current drag operation</a> is "<code title="">none</code>" (no drag operation), or, if the user ended
+ the drag-and-drop operation by canceling it (e.g. by hitting the
+ <kbd>Escape</kbd> key), or if the <a href=#current-target-element>current target
+ element</a> is null, then the drag operation failed. Run
+ these substeps:</p>
- </li>
+ <ol><li><p>Let <var title="">dropped</var> be false.</li>
- <li>
+ <li><p>If the <a href=#current-target-element>current target element</a> is a DOM
+ element, <a href=#fire-a-dnd-event>fire a DND event</a> named <code title=event-dragleave><a href=#event-dragleave>dragleave</a></code> at it; otherwise, if
+ it is not null, use platform-specific conventions for drag
+ cancellation.</p>
- <p>Otherwise, the drag operation was as success. If the
- <a href=#current-target-element>current target element</a> is a DOM element, the user
- agent must fire a <code title=event-drop><a href=#event-drop>drop</a></code> event at
- it; otherwise, it must use platform-specific conventions for
- indicating a drop.</p>
+ </ol><p>Otherwise, the drag operation was as success; run these substeps:</p>
- <p>When the target is a DOM element, the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
- of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
- must be given the value representing the <a href=#current-drag-operation>current drag
- operation</a> (<code title="">copy</code>, <code title="">link</code>, or <code title="">move</code>), and the
- object must be set up so that the <code title=dom-DataTransfer-getData><a href=#dom-datatransfer-getdata>getData()</a></code> method will
- return the data that was added during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event, and the <code title=dom-datatransfer-files><a href=#dom-datatransfer-files>files</a></code> attribute will
- return a <code>FileList</code> object with any files that were
- dragged.</p>
+ <ol><li><p>Let <var title="">dropped</var> be true.</li>
- <p>If the event is canceled, the <a href=#current-drag-operation>current drag
- operation</a> must be set to the value of the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
- of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object as
- it stood after the event was handled.</p>
+ <li><p>If the <a href=#current-target-element>current target element</a> is a DOM
+ element, <a href=#fire-a-dnd-event>fire a DND event</a> named <code title=event-drop><a href=#event-drop>drop</a></code> at it; otherwise, use
+ platform-specific conventions for indicating a drop.</li>
- <p>Otherwise, the event is not canceled, and the user agent must
- perform the event's default action, which depends on the exact
- target as follows:</p>
+ <li>
- <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
- (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
- whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
- the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
- <a href=#editable>editable</a> element</dt>
+ <p>If the event is canceled, set the <a href=#current-drag-operation>current drag
+ operation</a> to the value of the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
+ of the <code><a href=#dragevent>DragEvent</a></code> object's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
+ as it stood after the event dispatch finished.</p>
- <dd>The user agent must insert the data associated with the
- <code>text/plain</code> format, if any, into the text field or
- <a href=#editable>editable</a> element in a manner consistent with
- platform-specific conventions (e.g. inserting it at the current
- mouse cursor position, or inserting it at the end of the
- field).</dd>
+ <p>Otherwise, the event is not canceled; perform the event's
+ default action, which depends on the exact target as
+ follows:</p>
- <dt>Otherwise</dt>
+ <dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
+ (e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
+ whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
+ the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state) or an
+ <a href=#editable>editable</a> element</dt>
- <dd>Reset the <a href=#current-drag-operation>current drag operation</a> to
- "none".</dd>
+ <dd><p>If the <a href=#drag-data-store-item-list>drag data store item list</a> has an
+ item with <a href=#the-drag-data-item-type-string>the drag data item type string</a>
+ "<code>text/plain</code>" and <a href=#the-drag-data-item-kind>the drag data item
+ kind</a> <i>Plain Unicode string</i>, insert the actual data
+ of that item into the text field or <a href=#editable>editable</a>
+ element in a manner consistent with platform-specific
+ conventions (e.g. inserting it at the current mouse cursor
+ position, or inserting it at the end of the field).</dd>
- </dl></li>
+ <dt>Otherwise</dt>
+ <dd><p>Reset the <a href=#current-drag-operation>current drag operation</a> to
+ "<code title="">none</code>".</p>~</dd>
+
+ </dl></li>
+
+ </ol></li>
+
<li>
- <p>Finally, the user agent must fire a <code title=event-dragend><a href=#event-dragend>dragend</a></code> event at the <a href=#source-node>source
- node</a>, with the <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute
- of the event's <code title=dom-DragEvent-dataTransfer><a href=#dom-dragevent-datatransfer>dataTransfer</a></code> object
- being set to the value corresponding to the <a href=#current-drag-operation>current drag
- operation</a>.</p>
+ <p><a href=#fire-a-dnd-event>Fire a DND event</a> named <code title=event-dragend><a href=#event-dragend>dragend</a></code> at the <a href=#source-node>source
+ node</a>.</p>
- <p class=note>The <a href=#current-drag-operation>current drag operation</a> can
- change during the processing of the <code title=event-drop><a href=#event-drop>drop</a></code> event, if one was fired.</p>
+ </li>
- <p>The event is not cancelable. After the event has been
- handled, the user agent must act as follows:</p>
+ <li>
+ <p>Run the appropriate steps from the following list as the
+ default action of the <code title=event-dragend><a href=#event-dragend>dragend</a></code>
+ event:</p>
+
<dl class=switch><dt>If the <a href=#current-target-element>current target element</a> is a text field
(e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state), and
- a <code title=event-drop><a href=#event-drop>drop</a></code> event was fired in the
- previous step, and the <a href=#current-drag-operation>current drag operation</a> is
- "move", and the source of the drag-and-drop operation is a
- selection in the DOM</dt>
+ <var title="">dropped</var> is true, and the <a href=#current-drag-operation>current drag
+ operation</a> is "<code title="">move</code>", and the
+ source of the drag-and-drop operation is a selection in the
+ DOM</dt>
<dd>The user agent should delete the range representing the
dragged selection from the DOM.</dd>
@@ -66905,10 +67118,10 @@
(e.g. <code><a href=#the-textarea-element>textarea</a></code>, or an <code><a href=#the-input-element>input</a></code> element
whose <code title=attr-input-type><a href=#attr-input-type>type</a></code> attribute is in
the <a href=#text-state-and-search-state title=attr-input-type-text>Text</a> state), and
- a <code title=event-drop><a href=#event-drop>drop</a></code> event was fired in the
- previous step, and the <a href=#current-drag-operation>current drag operation</a> is
- "move", and the source of the drag-and-drop operation is a
- selection in a text field</dt>
+ <var title="">dropped</var> is true, and the <a href=#current-drag-operation>current drag
+ operation</a> is "<code title="">move</code>", and the
+ source of the drag-and-drop operation is a selection in a text
+ field</dt>
<dd>The user agent should delete the dragged selection from the
relevant text field.</dd>
@@ -66932,7 +67145,7 @@
<div class=impl>
- <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.7.4.1 </span>When the drag-and-drop operation starts or ends in another
+ <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-document><span class=secno>8.7.5.1 </span>When the drag-and-drop operation starts or ends in another
document</h5>
<p>The model described above is independent of which
@@ -66947,7 +67160,7 @@
<div class=impl>
- <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.7.4.2 </span>When the drag-and-drop operation starts or ends in another
+ <h5 id=when-the-drag-and-drop-operation-starts-or-ends-in-another-application><span class=secno>8.7.5.2 </span>When the drag-and-drop operation starts or ends in another
application</h5>
<p>If the drag is initiated in another application, the <a href=#source-node>source
@@ -66977,8 +67190,87 @@
</div>
- <h4 id=the-draggable-attribute><span class=secno>8.7.5 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
+ <h4 id=dndevents><span class=secno>8.7.6 </span>Events summary</h4>
+ <p><i>This section is non-normative.</i></p>
+
+ <p>The following events are involved in the drag-and-drop
+ model.</p>
+
+ <table><thead><tr><th> Event Name </th>
+ <th> Target </th>
+ <!-- <th> Bubbles? </th> -->
+ <th> Cancelable? </th>
+ <th> <a href=#drag-data-store-mode>Drag data store mode</a> </th>
+ <!-- <th> <code title="dom-DataTransfer-effectAllowed">effectAllowed</code> </th> -->
+ <th> <code title=dom-DataTransfer-dropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> </th>
+ <th> Default Action </th>
+ <tbody><tr><td><dfn id=event-dragstart title=event-dragstart><code>dragstart</code></dfn></td>
+ <td><a href=#source-node>Source node</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-rw title=concept-dnd-rw>Read/write mode</a>
+ <!-- <td>"<code title="">uninitialized</code>"</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>Initiate the drag-and-drop operation</td>
+ <tr><td><dfn id=event-drag title=event-drag><code>drag</code></dfn></td>
+ <td><a href=#source-node>Source node</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>Continue the drag-and-drop operation</td>
+ <tr><td><dfn id=event-dragenter title=event-dragenter><code>dragenter</code></dfn></td>
+ <td><a href=#immediate-user-selection>Immediate user selection</a> or <a href=#the-body-element>the body element</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
+ <td>Reject <a href=#immediate-user-selection>immediate user selection</a> as potential <a href=#current-target-element title="current target element">target element</a></td>
+ <tr><td><dfn id=event-dragleave title=event-dragleave><code>dragleave</code></dfn></td>
+ <td><a href=#current-target-element title="current target element">Previous target element</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>—</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>None</td>
+ <tr><td><dfn id=event-dragover title=event-dragover><code>dragover</code></dfn></td>
+ <td><a href=#current-target-element>Current target element</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td><a href=#dropEffect-initialization>Based on <code>effectAllowed</code> value</a></td>
+ <td>Reset the <a href=#current-drag-operation>current drag operation</a> to "none"</td>
+ <tr><td><dfn id=event-drop title=event-drop><code>drop</code></dfn></td>
+ <td><a href=#current-target-element>Current target element</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><a href=#concept-dnd-ro title=concept-dnd-ro>Read-only mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td><a href=#current-drag-operation>Current drag operation</a></td>
+ <td>Varies</td>
+ <tr><td><dfn id=event-dragend title=event-dragend><code>dragend</code></dfn></td>
+ <td><a href=#source-node>Source node</a></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>—</td>
+ <td><a href=#concept-dnd-p title=concept-dnd-p>Protected mode</a>
+ <!-- <td>Same as last event</td> -->
+ <td><a href=#current-drag-operation>Current drag operation</a></td>
+ <td>Varies</td>
+ </table><p>Not shown in the above table: all these events bubble, and the
+ <code title=dom-DataTransfer-effectAllowed><a href=#dom-datatransfer-effectallowed>effectAllowed</a></code>
+ attribute always has the value it had after the previous event was
+ fired, defaulting to "<code title="">uninitialized</code>" in the
+ <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event.</p>
+
+
+
+ <h4 id=the-draggable-attribute><span class=secno>8.7.7 </span>The <dfn title=attr-draggable><code>draggable</code></dfn> attribute</h4>
+
<p>All <a href=#html-elements>HTML elements</a> may have the <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> content attribute set. The
<code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute is an
<a href=#enumerated-attribute>enumerated attribute</a>. It has three states. The first
@@ -67119,7 +67411,7 @@
<div class=impl>
- <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.7.6 </span>Security risks in the drag-and-drop model</h4>
+ <h4 id=security-risks-in-the-drag-and-drop-model><span class=secno>8.7.8 </span>Security risks in the drag-and-drop model</h4>
<p>User agents must not make the data added to the
<code><a href=#datatransfer>DataTransfer</a></code> object during the <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> event available to scripts
Modified: source
===================================================================
--- source 2010-10-25 22:32:13 UTC (rev 5646)
+++ source 2010-10-27 23:01:54 UTC (rev 5647)
@@ -75099,159 +75099,170 @@
+ <h4>The drag data store</h4>
- <h4>The <code>DragEvent</code> and <code>DataTransfer</code> interfaces</h4>
+ <p>The data that underlies a drag-and-drop operation, known as the
+ <dfn>drag data store</dfn>, consists of the following information:</p>
- <p>The drag-and-drop processing model involves several events. They
- all use the <code>DragEvent</code> interface.</p>
+ <ul>
- <pre class="idl">interface <dfn>DragEvent</dfn> : <span>MouseEvent</span> {
- readonly attribute <span>DataTransfer</span> <span title="dom-DragEvent-dataTransfer">dataTransfer</span>;
+ <li><p>A <dfn>drag data store item list</dfn>, which is a list of
+ items representing the dragged data, each consisting of the
+ following information:</p>
- void <span title="dom-DragEvent-initDragEvent">initDragEvent</span>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg<!-- used to be viewArg, back when we had views -->, 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 <span>DataTransfer</span> dataTransferArg);
-};</pre>
+ <dl>
- <dl class="domintro">
+ <dt><dfn>The drag data item type string</dfn></dt>
- <dt><var title="">event</var> . <code title="dom-DragEvent-dataTransfer">dataTransfer</code></dt>
+ <dd>
- <dd>
+ <p>A Unicode string giving the type or format of the data,
+ generally given by a <span>MIME type</span>. Some values that
+ are not <span title="MIME type">MIME types</span> are
+ special-cased for legacy reasons. The API does not enforce the
+ use of <span title="MIME type">MIME types</span>; other values
+ can be used as well. In all cases, however, the values are all
+ <span>converted to ASCII lowercase</span> by the API.</p>
- <p>Returns the <code>DataTransfer</code> object for the event.</p>
+ </dd>
- </dd>
+ <dt><dfn>The drag data item kind</dfn></dt>
- </dl>
+ <dd>
- <div class="impl">
+ <p>The kind of data:</p>
- <p>The <dfn
- title="dom-DragEvent-initDragEvent"><code>initDragEvent()</code></dfn>
- method must initialize the event in a manner analogous to the
- similarly-named method in the DOM Events interfaces, except that the
- <var title="">dummyArg</var> argument must be ignored. <a
- href="#refsDOMEVENTS">[DOMEVENTS]</a></p>
+ <dl>
- <p>The <dfn
- title="dom-DragEvent-dataTransfer"><code>dataTransfer</code></dfn>
- attribute of the <code>DragEvent</code> interface represents the
- context information for the event.</p>
+ <dt><i>Plain Unicode string</i></dt>
+ <dd>
+ <p>Raw text.</p>
+ </dd>
- </div>
+ <dt><i>Blob</i></dt>
+ <dd>
+ <p>Binary data.</p>
+ </dd>
- <pre class="idl">interface <dfn>DataTransfer</dfn> {
- attribute DOMString <span title="dom-DataTransfer-dropEffect">dropEffect</span>;
- attribute DOMString <span title="dom-DataTransfer-effectAllowed">effectAllowed</span>;
+ <dt><i>File</i></dt>
+ <dd>
+ <p>Binary data with a file name.</p>
+ </dd>
- readonly attribute DOMStringList <span title="dom-DataTransfer-types">types</span>;
- void <span title="dom-DataTransfer-clearData">clearData</span>(in optional DOMString format);
- void <span title="dom-DataTransfer-setData">setData</span>(in DOMString format, in DOMString data);
- DOMString <span title="dom-DataTransfer-getData">getData</span>(in DOMString format);
- readonly attribute <span>FileList</span> <span title="dom-DataTransfer-files">files</span>;
+ </dl>
- void <span title="dom-DataTransfer-setDragImage">setDragImage</span>(in Element image, in long x, in long y);
- void <span title="dom-DataTransfer-addElement">addElement</span>(in Element element);
-};</pre>
+ </dd>
- <p><code>DataTransfer</code> objects are used to expose the data
- that underlies a drag-and-drop operation.</p>
+ <dt>The actual data</dt>
- <p>The data that underlies a drag-and-drop operation, known as the
- <dfn>drag data store</dfn>, consists of an unordered list of items
- representing the dragged data, and some information used to generate
- the UI feedback during the drag.</p>
+ <dd><p>A Unicode or binary string, optionally with a file name
+ (itself a Unicode string), as per <span>the drag data item
+ kind</span>.</p></dd>
- <p>Each item representing dragged data in a <span>drag data
- store</span> has the following information:</p>
+ </dl>
- <ul>
+ </li>
<li>
- <p>The type or format of the data, generally given by a <span>MIME
- type</span>. Some values that are not <span title="MIME type">MIME
- types</span> are special-cased for legacy reasons. The API does
- not enforce the use of <span title="MIME type">MIME types</span>;
- other values can be used as well. In all cases, however, the
- values are all <span>converted to ASCII lowercase</span> by the
- API.</p>
+ <p>The following information, used to generate the UI feedback
+ during the drag:</p>
+ <ul>
+
+ <li>User-agent-defined default feedback information, known as the
+ <dfn>drag data store default feedback</dfn>.</li>
+
+ <li>A list of zero or more elements known as the <dfn>drag data
+ store elements list</dfn>.</li>
+
+ <li>Optionally, a bitmap image and the coordinate of a point
+ within that image, known as the <dfn>drag data store bitmap</dfn>
+ and <dfn>drag data store hot spot coordinate</dfn>.</li>
+
+ </ul>
+
</li>
<li>
- <p>The kind of data:</p>
+ <p>A <dfn>drag data store mode</dfn>, which is one of the
+ following:</p>
<dl>
- <dt>Plain Unicode string</dt>
+ <dt><dfn title="concept-dnd-rw">Read/write mode</dfn></dt>
<dd>
- <p>Raw text.</p>
+
+ <p>For the <code title="event-dragstart">dragstart</code> event.
+ New data can be added to the <span>drag data store</span>.</p>
+
</dd>
- <dt>Blob</dt>
+ <dt><dfn title="concept-dnd-ro">Read-only mode</dfn></dt>
<dd>
- <p>Binary data.</p>
+
+ <p>For the <code title="event-drop">drop</code> event. The list of
+ items representing dragged data can be read, including the data.
+ No new data can be added.</p>
+
</dd>
- <dt>File</dt>
+ <dt><dfn title="concept-dnd-p">Protected mode</dfn></dt>
<dd>
- <p>Binary data with a file name.</p>
+
+ <p>For all other events. The formats and kinds in the <span>drag
+ data store</span> list of items representing dragged data can be
+ enumerated, but the data itself is unavailable and no new data can
+ be added.</p>
+
</dd>
</dl>
</li>
- </ul>
+ <li>
- <p>The information in a <span>drag data store</span> used to
- generate the UI feedback during the drag consists of:</p>
+ <p>A <dfn>drag data store allowed effects state</dfn>, which is a
+ string.</p>
- <ul>
+ </li>
- <li>A list of zero or more elements.</li>
-
- <li>Optionally, a bitmap image and the coordinate of a point within
- that image.</li>
-
</ul>
- <p>A <span>drag data store</span> is created at the start of a
- drag-and-drop operation in the <i>read/write mode</i>, and then
- progresses through the following three modes as the operation
- proceeds:</p>
+ <p>When a <span>drag data store</span> is <dfn title="create a drag
+ data store">created</dfn>, it must be initialized such that its
+ <span>drag data store item list</span> is empty, it has no
+ <span>drag data store default feedback</span>, its <span>drag data
+ store elements list</span> is empty, it has no <span>drag data store
+ bitmap</span> / <span>drag data store hot spot coordinate</span>,
+ its <span>drag data store mode</span> is <span
+ title="concept-dnd-p">protected mode</span>, and its <span>drag data
+ store allowed effects state</span> is the string "<code
+ title="">uninitialized</code>".</p>
- <dl>
- <dt>Read/write mode</dt>
- <dd>
+ <h4>The <code>DataTransfer</code> interface</h4>
- <p>At the start of the drag. New data can be added to the
- <span>drag data store</span>.</p>
+ <p><code>DataTransfer</code> objects are used to expose the
+ <span>drag data store</span> that underlies a drag-and-drop
+ operation.</p>
- </dd>
+ <pre class="idl">interface <dfn>DataTransfer</dfn> {
+ attribute DOMString <span title="dom-DataTransfer-dropEffect">dropEffect</span>;
+ attribute DOMString <span title="dom-DataTransfer-effectAllowed">effectAllowed</span>;
- <dt>Protected mode</dt>
- <dd>
+ readonly attribute DOMStringList <span title="dom-DataTransfer-types">types</span>;
+ void <span title="dom-DataTransfer-clearData">clearData</span>(in optional DOMString format);
+ void <span title="dom-DataTransfer-setData">setData</span>(in DOMString format, in DOMString data);
+ DOMString <span title="dom-DataTransfer-getData">getData</span>(in DOMString format);
+ readonly attribute <span>FileList</span> <span title="dom-DataTransfer-files">files</span>;
- <p>During the drag. The formats and kinds in the <span>drag data
- store</span> list of items representing dragged data can be
- enumerated, but the data itself is unavailable and no new data can
- be added.</p>
+ void <span title="dom-DataTransfer-setDragImage">setDragImage</span>(in Element image, in long x, in long y);
+ void <span title="dom-DataTransfer-addElement">addElement</span>(in Element element);
+};</pre>
- </dd>
-
- <dt>Read-only mode</dt>
- <dd>
-
- <p>After the drop. The list of items representing dragged data can
- be read, including the data. No new data can be added.</p>
-
- </dd>
-
- </dl>
-
<dl class="domintro">
<dt><var title="">dataTransfer</var> . <code title="dom-DataTransfer-dropEffect">dropEffect</code> [ = <var title="">value</var> ]</dt>
@@ -75265,9 +75276,9 @@
<p>Can be set, to change the selected operation.</p>
- <p>The possible values are <code title="">none</code>, <code
- title="">copy</code>, <code title="">link</code>, and <code
- title="">move</code>.</p>
+ <p>The possible values are "<code title="">none</code>", "<code
+ title="">copy</code>", "<code title="">link</code>", and "<code
+ title="">move</code>".</p>
</dd>
@@ -75279,11 +75290,11 @@
<p>Can be set, to change the allowed operations.</p>
- <p>The possible values are <code title="">none</code>, <code
- title="">copy</code>, <code title="">copyLink</code>, <code
- title="">copyMove</code>, <code title="">link</code>, <code
- title="">linkMove</code>, <code title="">move</code>, <code
- title="">all</code>, and <code title="">uninitialized</code>,</p>
+ <p>The possible values are "<code title="">none</code>", "<code
+ title="">copy</code>", "<code title="">copyLink</code>", "<code
+ title="">copyMove</code>", "<code title="">link</code>", "<code
+ title="">linkMove</code>", "<code title="">move</code>", "<code
+ title="">all</code>", and "<code title="">uninitialized</code>",</p>
</dd>
@@ -75349,13 +75360,15 @@
</dl>
+ <p><code>DataTransfer</code> objects are used during the <a
+ href="#dndevents">drag-and-drop events</a>, and are only valid while
+ those events are being dispatched.</p>
+
<!--
XXX
plan:
- 2. replace the existing API definitions with links to this model
- 3. make it clear there's a new DataTransfer object with each event
4. expose model with new API
5. add dropzone="..." feature
@@ -75363,67 +75376,116 @@
<div class="impl">
- <p>When a <code>DataTransfer</code> object is created, it must be
- initialized as follows:</p>
+ <p>A <code>DataTransfer</code> object is associated with a
+ <code>drag data store</code> while it is valid.</p>
- <ul>
-
- <li>The <code>DataTransfer</code> object must initially contain no
- data, no elements, and have no associated image.</li>
-
- <li>The <code>DataTransfer</code> object's <code
- title="dom-DataTransfer-effectAllowed">effectAllowed</code>
- attribute must be set to "<code
- title="">uninitialized</code>".</li>
-
- <li>The <code title="dom-DataTransfer-dropEffect">dropEffect</code>
- attribute must be set to "<code title="">none</code>".</li>
-
- </ul>
-
<p>The <dfn
title="dom-DataTransfer-dropEffect"><code>dropEffect</code></dfn>
attribute controls the drag-and-drop feedback that the user is given
- during a drag-and-drop operation.</p>
+ during a drag-and-drop operation. When the <code>DataTransfer</code>
+ object is created, the <code
+ title="dom-DataTransfer-dropEffect">dropEffect</code> attribute is
+ set to a string value. On getting, it must return its current value.
+ On setting, if the new value is one of "<code title="">none</code>",
+ "<code title="">copy</code>", "<code title="">link</code>", or
+ "<code title="">move</code>", then the attribute's current value
+ must be set to the new value. Other values must be ignored.</p>
- <p>The attribute must ignore any attempts to set it to a value other
- than <code title="">none</code>, <code title="">copy</code>, <code
- title="">link</code>, and <code title="">move</code>. On getting,
- the attribute must return the last of those four values that it was
- set to.</p>
-
<p>The <dfn
title="dom-DataTransfer-effectAllowed"><code>effectAllowed</code></dfn>
attribute is used in the drag-and-drop processing model to
initialize the <code
title="dom-DataTransfer-dropEffect">dropEffect</code> attribute
during the <code title="event-dragenter">dragenter</code> and <code
- title="event-dragover">dragover</code> events.</p>
+ title="event-dragover">dragover</code> events. When the
+ <code>DataTransfer</code> object is created, the <code
+ title="dom-DataTransfer-effectAllowed">effectAllowed</code>
+ attribute is set to a string value. On getting, it must return its
+ current value. On setting, if the new value is one of "<code
+ title="">none</code>", "<code title="">copy</code>", "<code
+ title="">copyLink</code>", "<code title="">copyMove</code>", "<code
+ title="">link</code>", "<code title="">linkMove</code>", "<code
+ title="">move</code>", "<code title="">all</code>", or "<code
+ title="">uninitialized</code>", then the attribute's current value
+ must be set to the new value. Other values must be ignored.</p>
- <p>The attribute must ignore any attempts to set it to a value other
- than <code title="">none</code>, <code title="">copy</code>, <code
- title="">copyLink</code>, <code title="">copyMove</code>, <code
- title="">link</code>, <code title="">linkMove</code>, <code
- title="">move</code>, <code title="">all</code>, and <code
- title="">uninitialized</code>. On getting, the attribute must return
- the last of those values that it was set to.</p>
-
<p>The <dfn title="dom-DataTransfer-types"><code>types</code></dfn>
attribute must return a <span>live</span> <code>DOMStringList</code>
- that contains the list of formats that were added to the
- <code>DataTransfer</code> object in the corresponding <code
- title="event-dragstart">dragstart</code> event. The same object must
- be returned each time. If any files were included in the drag, then
- the <code>DOMStringList</code> object must in addition include the
- string "<code title="">Files</code>". (This value can be
- distinguished from the other values because it is not
- lowercase.)</p>
+ giving the strings that the following steps would produce. The same
+ object must be returned each time.</p>
+ <ol>
+
+ <li><p>Start with an empty list <var title="">L</var>.</p></li>
+
+ <li><p>If the <code>DataTransfer</code> object is no longer
+ associated with a <span>drag data store</span>, the
+ <code>DOMStringList</code> is empty. Abort these steps; return the
+ empty list <var title="">L</var>.</p></li>
+
+ <li><p>For each item in the <span>drag data store item list</span>
+ <!-- in some order...? --> whose <span title="the drag data item
+ kind">kind</span> is <i>Plain Unicode string</i>, add an entry to
+ the list <var title="">L</var> consisting of the item's <span
+ title="the drag data item type string">type string</span>.</p></li>
+
+ <li><p>If there are any items in the <span>drag data store item
+ list</span> whose <span title="the drag data item kind">kind</span>
+ is <i>File</i>, then add an entry to the list <var title="">L</var>
+ consisting of the string "<code title="">Files</code>". (This value
+ can be distinguished from the other values because it is not
+ lowercase.)</p></li>
+
+ <!-- <li><p>Sort the list...?</p></li> -->
+
+ <li><p>The strings produced by these steps are those in the list
+ <var title="">L</var>.</p></li>
+
+ </ol>
+
<p>The <dfn
title="dom-DataTransfer-clearData"><code>clearData()</code></dfn>
- method, when called with no arguments, must clear the
- <code>DataTransfer</code> object of all data (for all formats).</p>
+ method must run the following steps:</p>
+ <ol>
+
+ <li><p>If the <code>DataTransfer</code> object is no longer
+ associated with a <span>drag data store</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>If the <span>drag data store</span>'s <span title="drag data
+ store mode">mode</span> is not the <span
+ title="concept-dnd-rw">read/write mode</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>If the method was called with no arguments, remove each item
+ in the <span>drag data store item list</span> whose <span
+ title="the drag data item kind">kind</span> is <i>Plain Unicode
+ string</i>, and abort these steps.</p></li>
+
+ <li><p>Let <var title="">format</var> be the first argument,
+ <span>converted to ASCII lowercase</span>.</p></li>
+
+ <li>
+
+ <p>If <var title="">format</var> equals "<code
+ title="">text</code>", change it to "<code
+ title="">text/plain</code>".</p>
+
+ <p>If <var title="">format</var> equals "<code
+ title="">url</code>", change it to "<code
+ title="">text/uri-list</code>".</p>
+
+ </li>
+
+ <li><p>Remove each item in the <span>drag data store item
+ list</span> whose <span title="the drag data item kind">kind</span>
+ is <i>Plain Unicode string</i> and whose <span title="the drag data
+ item type string">type string</span> is equal to <var
+ title="">format</var>.</p></li>
+
+ </ol>
+
<p class="note">The <code
title="dom-DataTransfer-clearData">clearData()</code> method does
not affect whether any files were included in the drag, so the <code
@@ -75433,292 +75495,373 @@
still contain the "<code title="">Files</code>" string if any files
were included in the drag).</p>
- <p>When called with an argument, the <code
- title="dom-DataTransfer-clearData">clearData(<var
- title="">format</var>)</code> method must clear the
- <code>DataTransfer</code> object of any data associated with the
- given <var title="">format</var>, <span>converted to ASCII
- lowercase</span>. If <var title="">format</var> (after conversion to
- lowercase) is the value "<code title="">text</code>", then it must
- be treated as "<code title="">text/plain</code>". If the <var
- title="">format</var> (after conversion to lowercase) is "<code
- title="">url</code>", then it must be treated as "<code
- title="">text/uri-list</code>".</p>
-
<p>The <dfn title="dom-DataTransfer-setData"><code>setData(<var
title="">format</var>, <var title="">data</var>)</code></dfn> method
- must add <var title="">data</var> to the data stored in the
- <code>DataTransfer</code> object, labeled as being of the type <var
- title="">format</var>, <span>converted to ASCII
- lowercase</span>. This must replace any previous data that had been
- set for that format. If <var title="">format</var> (after conversion
- to lowercase) is the value "<code title="">text</code>", then it
- must be treated as "<code title="">text/plain</code>". If the <var
- title="">format</var> (after conversion to lowercase) is "<code
- title="">url</code>", then it must be treated as "<code
- title="">text/uri-list</code>".</p>
+ must run the following steps:</p>
+ <ol>
+
+ <li><p>If the <code>DataTransfer</code> object is no longer
+ associated with a <span>drag data store</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>If the <span>drag data store</span>'s <span title="drag data
+ store mode">mode</span> is not the <span
+ title="concept-dnd-rw">read/write mode</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>Let <var title="">format</var> be the first argument,
+ <span>converted to ASCII lowercase</span>.</p></li>
+
+ <li>
+
+ <p>If <var title="">format</var> equals "<code
+ title="">text</code>", change it to "<code
+ title="">text/plain</code>".</p>
+
+ <p>If <var title="">format</var> equals "<code
+ title="">url</code>", change it to "<code
+ title="">text/uri-list</code>".</p>
+
+ </li>
+
+ <li><p>Remove each item in the <span>drag data store item
+ list</span> whose <span title="the drag data item kind">kind</span>
+ is <i>Plain Unicode string</i> and whose <span title="the drag data
+ item type string">type string</span> is equal to <var
+ title="">format</var>.</p></li>
+
+ <li><p>Add an item to the <span>drag data store item list</span>
+ whose <span title="the drag data item kind">kind</span> is <i>Plain
+ Unicode string</i>, whose <span title="the drag data item type
+ string">type string</span> is equal to <var title="">format</var>,
+ and whose data is the string given by the method's second
+ argument.</p></li>
+
+ </ol>
+
<p>The <dfn title="dom-DataTransfer-getData"><code>getData(<var
- title="">format</var>)</code></dfn> method must return the data that
- is associated with the type <var title="">format</var>
- <span>converted to ASCII lowercase</span>, if any, and must return
- the empty string otherwise. If <var title="">format</var> (after
- conversion to lowercase) is the value "<code title="">text</code>",
- then it must be treated as "<code title="">text/plain</code>". If
- the <var title="">format</var> (after conversion to lowercase) is
- "<code title="">url</code>", then the data associated with the
- "<code title="">text/uri-list</code>" format must be parsed as
- appropriate for <code title="">text/uri-list</code> data, and the
- first URL from the list must be returned. If there is no data with
- that format, or if there is but it has no URLs, then the method must
- return the empty string. <a href="#refsRFC2483">[RFC2483]</a></p>
+ title="">format</var>, <var title="">data</var>)</code></dfn> method
+ must run the following steps:</p>
+ <ol>
+
+ <li><p>If the <code>DataTransfer</code> object is no longer
+ associated with a <span>drag data store</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>If the <span>drag data store</span>'s <span title="drag data
+ store mode">mode</span> is in the <span
+ title="concept-dnd-p">protected mode</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>Let <var title="">format</var> be the first argument,
+ <span>converted to ASCII lowercase</span>.</p></li>
+
+ <li><p>Let <var title="">convert-to-URL</var> be false.</p></li>
+
+ <li><p>If <var title="">format</var> equals "<code
+ title="">text</code>", change it to "<code
+ title="">text/plain</code>".</p></li>
+
+ <li><p>If <var title="">format</var> equals "<code
+ title="">url</code>", change it to "<code
+ title="">text/uri-list</code>" and set <var
+ title="">convert-to-URL</var> to true.</p></li>
+
+ <li><p>If there is no item in the <span>drag data store item
+ list</span> whose <span title="the drag data item kind">kind</span>
+ is <i>Plain Unicode string</i> and whose <span title="the drag data
+ item type string">type string</span> is equal to <var
+ title="">format</var>, return the empty string and abort these
+ steps.</p></li>
+
+ <li><p>Let <var title="">result</var> be the data of the first item
+ to the <span>drag data store item list</span> whose <span
+ title="the drag data item kind">kind</span> is <i>Plain Unicode
+ string</i> and whose <span title="the drag data item type
+ string">type string</span> is equal to <var
+ title="">format</var>.</p></li>
+
+ <li><p>If <var title="">convert-to-URL</var> is true, then parse
+ <var title="">result</var> as appropriate for <code
+ title="">text/uri-list</code> data, and then set <var
+ title="">result</var> to the first URL from the list, if any, or
+ the empty string otherwise. <a
+ href="#refsRFC2483">[RFC2483]</a></p></li>
+
+ <li><p>Return <var title="">result</var>.</p></li>
+
+ </ol>
+
<p>The <dfn title="dom-DataTransfer-files"><code>files</code></dfn>
- attribute must return the <code>FileList</code> object that contains
- the files that are stored in the <code>DataTransfer</code>
- object. There is one such object per <code>DataTransfer</code>
- object.</p>
+ attribute must return a <span>live</span> <code>FileList</code>
+ sequence consisting of <code>File</code> objects representing the
+ files found by the following steps. The same object must be returned
+ each time. Furthermore, for a given <code>FileList</code> object and
+ a given underlying file, the same <code>File</code> object must be
+ used each time.</p>
+ <ol>
+
+ <li><p>Start with an empty list <var title="">L</var>.</p></li>
+
+ <li><p>If the <code>DataTransfer</code> object is no longer
+ associated with a <span>drag data store</span>, the
+ <code>FileList</code> is empty. Abort these steps; return the
+ empty list <var title="">L</var>.</p></li>
+
+ <li><p>For each item in the <span>drag data store item list</span>
+ <!-- in some order...? --> whose <span title="the drag data item
+ kind">kind</span> is <i>File</i> (not <i>Blob</i>), add the item's
+ data (the file, in particular its name and contents, as well as its
+ <span title="the drag data item type string">type</span>) to the
+ list <var title="">L</var>.</p></li>
+
+ <!-- <li><p>Sort the list...?</p></li> -->
+
+ <li><p>The files found by these steps are those in the list <var
+ title="">L</var>.</p></li>
+
+ </ol>
+
<p class="note">This version of the API does not expose the types of
the files during the drag.</p>
<p>The <dfn
title="dom-DataTransfer-setDragImage"><code>setDragImage(<var
title="">element</var>, <var title="">x</var>, <var
- title="">y</var>)</code></dfn> method sets which element to use <a
- href="#base-dnd-feedback">to generate the drag feedback</a>. The
- <var title="">element</var> argument can be any
- <code>Element</code>; if it is an <code>img</code> element, then the
- user agent should use the element's image (at its intrinsic size) to
- generate the feedback, otherwise the user agent should base the
- feedback on the given element (but the exact mechanism for doing so
- is not specified).</p>
+ title="">y</var>)</code></dfn> method must run the following
+ steps:</p>
+ <ol>
+
+ <li><p>If the <code>DataTransfer</code> object is no longer
+ associated with a <span>drag data store</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>If the <span>drag data store</span>'s <span title="drag data
+ store mode">mode</span> is not in the <span
+ title="concept-dnd-rw">read/write mode</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>If the <var title="">element</var> argument is an
+ <code>img</code> element, then set the <span>drag data store
+ bitmap</span> to the element's image (at its intrinsic size);
+ otherwise, set the <span>drag data store bitmap</span> to an image
+ generated from the given element (the exact mechanism for doing so
+ is not currently specified).</p></li>
+
+ <li><p>Set the <span>drag data store hot spot</span> to the given
+ <var title="">x</var>, <var title="">y</var> coordinate.</p></li>
+
+ </ol>
+
<p>The <dfn
title="dom-DataTransfer-addElement"><code>addElement(<var
title="">element</var>)</code></dfn> method is an alternative way of
specifying how the user agent is to <a
- href="#base-dnd-feedback">render the drag feedback</a>. It adds an
- element to the <code>DataTransfer</code> object.</p>
+ href="#base-dnd-feedback">render the drag feedback</a>. The method
+ must run the following steps:</p>
+ <ol>
+
+ <li><p>If the <code>DataTransfer</code> object is no longer
+ associated with a <span>drag data store</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>If the <span>drag data store</span>'s <span title="drag data
+ store mode">mode</span> is not in the <span
+ title="concept-dnd-rw">read/write mode</span>, abort these steps.
+ Nothing happens.</p></li>
+
+ <li><p>Add the given <var title="">element</var> to the element's
+ <span>drag data store elements list</span>.</p></li>
+
+ </ol>
+
<p class="note">The difference between <code
title="dom-DataTransfer-setDragImage">setDragImage()</code> and
<code title="dom-DataTransfer-addElement">addElement()</code> is
that the latter automatically generates the image based on the
- current rendering of the elements added, whereas the former uses the
- exact specified image.</p>
+ current rendering of the elements added (potentially keeping it
+ updated as the drag continues, e.g. if the elements include an
+ actively playing video), whereas the former uses the exact specified
+ image at the time the method is invoked.</p>
</div>
- <h4 id="dndevents">Events fired during a drag-and-drop action</h4>
- <p>The following events are involved in the drag-and-drop
- model.</p>
+ <h4>The <code>DragEvent</code> interface</h4>
+ <p>The drag-and-drop processing model involves several events. They
+ all use the <code>DragEvent</code> interface.</p>
+
+ <pre class="idl">interface <dfn>DragEvent</dfn> : <span>MouseEvent</span> {
+ readonly attribute <span>DataTransfer</span> <span title="dom-DragEvent-dataTransfer">dataTransfer</span>;
+
+ void <span title="dom-DragEvent-initDragEvent">initDragEvent</span>(in DOMString typeArg, in boolean canBubbleArg, in boolean cancelableArg, in any dummyArg<!-- used to be viewArg, back when we had views -->, 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 <span>DataTransfer</span> dataTransferArg);
+};</pre>
+
+ <dl class="domintro">
+
+ <dt><var title="">event</var> . <code title="dom-DragEvent-dataTransfer">dataTransfer</code></dt>
+
+ <dd>
+
+ <p>Returns the <code>DataTransfer</code> object for the event.</p>
+
+ </dd>
+
+ </dl>
+
<div class="impl">
- <p>Whenever the processing model described below causes one of these
- events to be fired, the event fired must use the
- <code>DragEvent</code> interface defined above, must have the
- bubbling and cancelable behaviors given in the table below, and must
- have the context information set up as described after the table,
- with the <code title="dom-UIEvent-detail">detail</code> attribute
- set to zero, the mouse and key attributes set according to the state
- of the input devices as they would be for user interaction events,
- and the <code title="">relatedTarget</code> attribute set to
- null.</p>
+ <p>The <dfn
+ title="dom-DragEvent-initDragEvent"><code>initDragEvent()</code></dfn>
+ method must initialize the event in a manner analogous to the
+ similarly-named method in the DOM Events interfaces, except that the
+ <var title="">dummyArg</var> argument must be ignored. <a
+ href="#refsDOMEVENTS">[DOMEVENTS]</a></p>
- <p>If there is no relevant pointing device, the object must have its
- <code title="">screenX</code>, <code title="">screenY</code>, <code
- title="">clientX</code>, <code title="">clientY</code>, and <code
- title="">button</code> attributes set to 0.</p>
+ <p>The <dfn
+ title="dom-DragEvent-dataTransfer"><code>dataTransfer</code></dfn>
+ attribute of the <code>DragEvent</code> interface represents the
+ context information for the event.</p>
- <!-- interaction event spec point -->
-
</div>
- <table>
+ <div class="impl">
- <thead>
- <tr>
- <th> Event Name </th>
- <th> Target </th>
- <th> Bubbles? </th>
- <th> Cancelable? </th>
- <th> <code title="dom-DataTransfer-dataTransfer">dataTransfer</code> </th>
- <th> <code title="dom-DataTransfer-effectAllowed">effectAllowed</code> </th>
- <th> <code title="dom-DataTransfer-dropEffect">dropEffect</code> </th>
- <th> Default Action </th>
- </tr>
- </thead>
+ <p>When a user agent is required to <dfn>fire a DND event</dfn>
+ named <var title="">e</var> at an element, using a particular
+ <span>drag data store</span>, the user agent must run the following
+ steps:</p>
- <tbody>
+ <ol>
- <tr>
- <td><dfn title="event-dragstart"><code>dragstart</code></dfn></td>
- <td><span>Source node</span></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Contains <span>source node</span> unless a selection is being dragged, in which case it is empty; <code title="dom-datatransfer-files">files</code> returns any files included in the drag operation</td>
- <td><code title="">uninitialized</code></td>
- <td><code title="">none</code></td>
- <td>Initiate the drag-and-drop operation</td>
- </tr>
+ <li>
- <tr>
- <td><dfn title="event-drag"><code>drag</code></dfn></td>
- <td><span>Source node</span></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href="#effectAllowed-initialization">Same as last event</a></td>
- <td><code title="">none</code></td>
- <td>Continue the drag-and-drop operation</td>
- </tr>
+ <p>If <var title="">e</var> is <code
+ title="event-dragstart">dragstart</code>, set the <span>drag data
+ store mode</span> to the <span title="concept-dnd-rw">read/write
+ mode</span>.</p>
- <tr>
- <td><dfn title="event-dragenter"><code>dragenter</code></dfn></td>
- <td><span>Immediate user selection</span> or <span>the body element</span></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href="#effectAllowed-initialization">Same as last event</a></td>
- <td><a href="#dropEffect-initialization">Based on <code>effectAllowed</code> value</a></td>
- <td>Reject <span>immediate user selection</span> as potential <span title="current target element">target element</span></td>
- </tr>
+ <p>If <var title="">e</var> is <code
+ title="event-drop">drop</code>, set the <span>drag data store
+ mode</span> to the <span title="concept-dnd-ro">read-only
+ mode</span>.</p>
- <tr>
- <td><dfn title="event-dragleave"><code>dragleave</code></dfn></td>
- <td><span title="current target element">Previous target element</span></td>
- <td>✓ Bubbles</td>
- <td>—</td>
- <td>Empty</td>
- <td><a href="#effectAllowed-initialization">Same as last event</a></td>
- <td><code title="">none</code></td>
- <td>None</td>
- </tr>
+ </li>
- <tr>
- <td><dfn title="event-dragover"><code>dragover</code></dfn></td>
- <td><span>Current target element</span></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td>Empty</td>
- <td><a href="#effectAllowed-initialization">Same as last event</a></td>
- <td><a href="#dropEffect-initialization">Based on <code>effectAllowed</code> value</a></td>
- <td>Reset the <span>current drag operation</span> to "none"</td>
- </tr>
+ <li><p>Let <var title="">dataTransfer</var> be a newly created
+ <code>DataTransfer</code> object associated with the given
+ <span>drag data store</span>.</p></li>
- <tr>
- <td><dfn title="event-drop"><code>drop</code></dfn></td>
- <td><span>Current target element</span></td>
- <td>✓ Bubbles</td>
- <td>✓ Cancelable</td>
- <td><code title="dom-datatransfer-getdata">getData()</code> returns data set in <code title="dom-dragstart">dragstart</code> event; <code title="dom-datatransfer-files">files</code> returns any files included in the drag operation</td>
- <td><a href="#effectAllowed-initialization">Same as last event</a></td>
- <td><span>Current drag operation</span></td>
- <td>Varies</td>
- </tr>
+ <li><p id="effectAllowed-initialization">Set the <code
+ title="dom-DataTransfer-effectAllowed">effectAllowed</code>
+ attribute to the <span>drag data store</span>'s <span>drag data
+ store allowed effects state</span>.</p></li>
- <tr>
- <td><dfn title="event-dragend"><code>dragend</code></dfn></td>
- <td><span>Source node</span></td>
- <td>✓ Bubbles</td>
- <td>—</td>
- <td>Empty</td>
- <td><a href="#effectAllowed-initialization">Same as last event</a></td>
- <td><span>Current drag operation</span></td>
- <td>Varies</td>
- </tr>
+ <li>
- </tbody>
+ <p id="dropEffect-initialization">Set the <code
+ title="dom-DataTransfer-dropEffect">dropEffect</code> attribute to
+ "<code title="">none</code>" if <var title="">e</var> is <code
+ title="event-dragstart">dragstart</code>, <code
+ title="event-drag">drag</code>, or <code
+ title="event-dragleave">dragleave</code>; to the value
+ corresponding to the <span>current drag operation</span> if <var
+ title="">e</var> is <code title="event-drop">drop</code> or <code
+ title="event-dragend">dragend</code>; and to a value based on the
+ <code title="dom-DataTransfer-effectAllowed">effectAllowed</code>
+ attribute's value and to the drag-and-drop source, as given by the
+ following table, otherwise (i.e. if <var title="">e</var> is <code
+ title="event-dragenter">dragenter</code> or <code
+ title="event-dragover">dragover</code>):</p>
- </table>
+ <table>
+ <thead>
+ <tr>
+ <th><code title="dom-DataTransfer-effectAllowed">effectAllowed</code></th>
+ <th><code title="dom-DataTransfer-dropEffect">dropEffect</code></th>
+ </tr>
+ </thead>
+ <tr>
+ <td>"<code title="">none</code>"</td>
+ <td>"<code title="">none</code>"</td>
+ </tr>
+ <tr>
+ <td>"<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", "<code title="">all</code>"</td>
+ <td>"<code title="">copy</code>"</td>
+ </tr>
+ <tr>
+ <td>"<code title="">link</code>", "<code title="">linkMove</code>"</td>
+ <td>"<code title="">link</code>"</td>
+ </tr>
+ <tr>
+ <td>"<code title="">move</code>"</td>
+ <td>"<code title="">move</code>"</td>
+ </tr>
+ <tr>
+ <td>"<code title="">uninitialized</code>" when what is being dragged is a selection from a text field</td>
+ <td>"<code title="">move</code>"</td>
+ </tr>
+ <tr>
+ <td>"<code title="">uninitialized</code>" when what is being dragged is a selection</td>
+ <td>"<code title="">copy</code>"</td>
+ </tr>
+ <tr>
+ <td>"<code title="">uninitialized</code>" when what is being dragged is an <code>a</code> element with an <code>href</code> attribute</td>
+ <td>"<code title="">link</code>"</td>
+ </tr>
+ <tr>
+ <td>Any other case</td>
+ <td>"<code title="">copy</code>"</td>
+ </tr>
+ </table>
- <p class="note">"Empty" in the table above means that the <code
- title="dom-datatransfer-getdata">getData()</code> and <code
- title="dom-dataTransfer-files">files</code> attributes act as if
- there is no data being dragged.</p>
+ </li>
- <div class="impl">
+ <li>
- <p>The <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
- object's contents are empty (the <code
- title="dom-datatransfer-getdata">getData()</code> and <code
- title="dom-dataTransfer-files">files</code> attributes act as if
- there is no data being dragged) except for <code
- title="event-dragstart">dragstart</code> events and <code
- title="event-drop">drop</code> events, for which the contents are
- set as described in the processing model, below.</p>
+ <p>Create a <code>DragEvent</code> object and initialize it to
+ have the given name <var title="">e</var>, to bubble, to be
+ cancelable unless <var title="">e</var> is <code
+ title="event-dragleave">dragleave</code> or <code
+ title="event-dragend">dragend</code>, and to have the <code
+ title="dom-UIEvent-detail">detail</code> attribute set to zero,
+ the mouse and key attributes set according to the state of the
+ input devices as they would be for user interaction events, the
+ <code title="">relatedTarget</code> attribute set to null, and the
+ <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
+ attribute set to <var title="">dataTransfer</var>, the
+ <code>DataTransfer</code> object created above.</p>
- <p id="effectAllowed-initialization">The <code
- title="dom-DataTransfer-effectAllowed">effectAllowed</code>
- attribute must be set to "<code title="">uninitialized</code>" for
- <code title="event-dragstart">dragstart</code> events, and to
- whatever value the field had after the last drag-and-drop event was
- fired for all other events (only counting events fired by the user
- agent for the purposes of the drag-and-drop model described
- below).</p>
+ <!-- interaction event spec point -->
- <p id="dropEffect-initialization">The <code
- title="dom-DataTransfer-dropEffect">dropEffect</code> attribute must
- be set to "<code title="">none</code>" for <code
- title="event-dragstart">dragstart</code>, <code
- title="event-drag">drag</code>, and <code
- title="event-dragleave">dragleave</code> events (except when stated
- otherwise in the algorithms given in the sections below), to the
- value corresponding to the <span>current drag operation</span> for
- <code title="event-drop">drop</code> and <code
- title="event-dragend">dragend</code> events, and to a value based on
- the <code
- title="dom-DataTransfer-effectAllowed">effectAllowed</code>
- attribute's value and to the drag-and-drop source, as given by the
- following table, for the remaining events (<code
- title="event-dragenter">dragenter</code> and <code
- title="event-dragover">dragover</code>):</p>
+ <p>If there is no relevant pointing device, the object must have
+ its <code title="">screenX</code>, <code title="">screenY</code>,
+ <code title="">clientX</code>, <code title="">clientY</code>, and
+ <code title="">button</code> attributes set to 0.</p>
- <table>
- <thead>
- <tr>
- <th><code title="dom-DataTransfer-effectAllowed">effectAllowed</code></th>
- <th><code title="dom-DataTransfer-dropEffect">dropEffect</code></th>
- </tr>
- </thead>
- <tr>
- <td><code title="">none</code></td>
- <td><code title="">none</code></td>
- </tr>
- <tr>
- <td><code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, <code title="">all</code></td>
- <td><code title="">copy</code></td>
- </tr>
- <tr>
- <td><code title="">link</code>, <code title="">linkMove</code></td>
- <td><code title="">link</code></td>
- </tr>
- <tr>
- <td><code title="">move</code></td>
- <td><code title="">move</code></td>
- </tr>
- <tr>
- <td><code title="">uninitialized</code> when what is being dragged is a selection from a text field</td>
- <td><code title="">move</code></td>
- </tr>
- <tr>
- <td><code title="">uninitialized</code> when what is being dragged is a selection</td>
- <td><code title="">copy</code></td>
- </tr>
- <tr>
- <td><code title="">uninitialized</code> when what is being dragged is an <code>a</code> element with an <code>href</code> attribute</td>
- <td><code title="">link</code></td>
- </tr>
- <tr>
- <td>Any other case</td>
- <td><code title="">copy</code></td>
- </tr>
- </table>
+ </li>
+ <li><p>Dispatch the newly created <code>DragEvent</code> object at
+ the specified target element.</p></li>
+
+ <li><p>Set the <span>drag data store allowed effects state</span>
+ to the current value of <var title="">dataTransfer</var>'s <code
+ title="dom-DataTransfer-effectAllowed">effectAllowed</code>
+ attribute.</p></li>
+
+ <li><p>Set the <span>drag data store mode</span> back to the <span
+ title="concept-dnd-p">protected mode</span> if it was changed in
+ the first step.</p></li>
+
+ </ol>
+
</div>
@@ -75727,98 +75870,150 @@
<h4>Drag-and-drop processing model</h4>
<p>When the user attempts to begin a drag operation, the user agent
- must first determine what is being dragged. If the drag operation
- was invoked on a selection, then it is the selection that is being
- dragged. Otherwise, it is the first element, going up the ancestor
- chain, starting at the node that the user tried to drag, that has
- the IDL attribute <code title="dom-draggable">draggable</code> set
- to true. If there is no such element, then nothing is being dragged,
- the drag-and-drop operation is never started, and the user agent
- must not continue with this algorithm.</p>
+ must run the following steps. User agents must act as if these steps
+ were run even if the drag actually started in another document or
+ application and the user agent was not aware that the drag was
+ occuring until it intersected with a document under the user agent's
+ purview.</p>
- <p class="note"><code>img</code> elements and <code>a</code>
- elements with an <code title="attr-hyperlink-href">href</code>
- attribute have their <code title="dom-draggable">draggable</code>
- attribute set to true by default.</p>
+ <ol>
- <p>If the user agent determines that something can be dragged, a
- <code title="event-dragstart">dragstart</code> event must then be
- fired at the <span>source node</span>.</p>
+ <li>
- <p>The <dfn>source node</dfn> depends on the kind of drag and how it
- was initiated. If it is a selection that is being dragged, then the
- <span>source node</span> is the text node that the user started the
- drag on (typically the text node that the user originally
- clicked). If the user did not specify a particular node, for example
- if the user just told the user agent to begin a drag of "the
- selection", then the <span>source node</span> is the first text node
- containing a part of the selection. If it is not a selection that is
- being dragged, then the <span>source node</span> is the element that
- is being dragged.</p>
+ <p>Determine what is being dragged, as follows:</p>
- <p>Multiple events are fired on the <span>source node</span> during
- the course of the drag-and-drop operation.</p>
+ <p>If the drag operation was invoked on a selection, then it is
+ the selection that is being dragged.</p>
- <hr>
+ <p>Otherwise, if the drag operation was invoked on a
+ <code>Document</code>, it is the first element, going up the
+ ancestor chain, starting at the node that the user tried to drag,
+ that has the IDL attribute <code
+ title="dom-draggable">draggable</code> set to true. If there is no
+ such element, then nothing is being dragged; abort these steps,
+ the drag-and-drop operation is never started.</p>
- <p>The <dfn>list of dragged nodes</dfn> also depends on the kind of
- drag. If it is a selection that is being dragged, then the
- <span>list of dragged nodes</span> contains, in <span>tree
- order</span>, every node that is partially or completely included in
- the selection (including all their ancestors). Otherwise, the
- <span>list of dragged nodes</span> contains only the <span>source
- node</span>.</p>
+ <p>Otherwise, the drag operation was invoked outside the user
+ agent's purview. What is being dragged is defined by the document
+ or application where the drag was started.</p>
- <hr>
+ <p class="note"><code>img</code> elements and <code>a</code>
+ elements with an <code title="attr-hyperlink-href">href</code>
+ attribute have their <code title="dom-draggable">draggable</code>
+ attribute set to true by default.</p>
- <p>If it is a selection that is being dragged, the <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> member of the
- event must be created with no nodes. Otherwise, it must be created
- containing just the <span>source node</span>. Script can use the
- <code title="dom-DataTransfer-addElement">addElement()</code> method
- to add further elements to the list of what is being dragged. (This
- list is only used for rendering the drag feedback.)</p>
+ </li>
- <p>The <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
- member of the event also has data added to it, as follows:</p>
+ <li><p><span>Create a drag data store</span>. All the DND events
+ fired subsequently by this algorithm must use this <span>drag data
+ store</span>.</p></li>
- <ul>
+ <li>
+ <p>Establish which DOM node is the <dfn>source node</dfn>, as
+ follows:</p>
+
+ <p>If it is a selection that is being dragged, then the
+ <span>source node</span> is the text node that the user started
+ the drag on (typically the text node that the user originally
+ clicked). If the user did not specify a particular node, for
+ example if the user just told the user agent to begin a drag of
+ "the selection", then the <span>source node</span> is the first
+ text node containing a part of the selection.</p>
+
+ <p>Otherwise, if it is an element that is being dragged, then the
+ <span>source node</span> is the element that is being dragged.</p>
+
+ <p>Otherwise, the <span>source node</span> is part of another
+ document or application, and user agents must not actually fire
+ events at it when this algorithm requires that they do so.</p>
+
+ <p class="note">Multiple events are fired on the <span>source
+ node</span> during the course of the drag-and-drop operation.</p>
+
+ </li>
+
<li>
- <p>If it is a selection that is being dragged, then the user agent
- must add the text of the selection to the <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> member,
- associated with the <code title="">text/plain</code> format.</p>
+ <p>Determine the <dfn>list of dragged nodes</dfn>, as follows:</p>
+ <p>If it is a selection that is being dragged, then the <span>list
+ of dragged nodes</span> contains, in <span>tree order</span>,
+ every node that is partially or completely included in the
+ selection (including all their ancestors).</p>
+
+ <p>Otherwise, the <span>list of dragged nodes</span> contains only
+ the <span>source node</span>, if any.</p>
+
</li>
<li>
- <p>If files are being dragged, then the user agent must add the
- files to the <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> member's
- <code title="dom-datatransfer-files">files</code> attribute's
- <code>FileList</code> object. (Dragging files can only happen from
+ <p>If it is a selection that is being dragged, then add an item to
+ the <span>drag data store item list</span>, with its properties
+ set as follows:</p>
+
+ <dl>
+
+ <dt><span>The drag data item type string</span>
+ <dd>"<code>text/plain</code>"</dd>
+
+ <dt><span>The drag data item kind</span>
+ <dd><i>Plain Unicode string</i></dd>
+
+ <dt>The actual data</dt>
+ <dd>The text of the selection</dd>
+
+ </dl>
+
+ <p>Otherwise, if any files are being dragged, then add one item
+ per file to the <span>drag data store item list</span>, with their
+ properties set as follows:</p>
+
+ <dl>
+
+ <dt><span>The drag data item type string</span>
+ <dd>The MIME type of the file, if known, or "<code>application/octet-stream</code>" otherwise.</dd>
+
+ <dt><span>The drag data item kind</span>
+ <dd><i>File</i></dd>
+
+ <dt>The actual data</dt>
+ <dd>The file's contents and name.</dd>
+
+ </dl>
+
+ <p class="note">Dragging files can currently only happen from
outside a <span>browsing context</span>, for example from a file
- system manager application, and thus the <code
- title="event-dragstart">dragstart</code> event is actually implied
- in this case.)</p>
+ system manager application.</p>
</li>
+ <!-- v2: text/html as an export format -->
+
<!--END w3c-html--><!--MD-->
<li>
- <p>The user agent must take the <span>list of dragged nodes</span>
- and <span title="extracting JSON">extract the microdata from those
- nodes into a JSON form</span>, and then must add the resulting
- string to the <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> member,
- associated with the <code
- title="">application/microdata+json</code> format.</p>
+ <p>If the <span>list of dragged nodes</span> is not empty, then
+ <span title="extracting JSON">extract the microdata from those
+ nodes into a JSON form</span>, and add one item to the <span>drag
+ data store item list</span>, with its properties set as
+ follows:</p>
+ <dl>
+
+ <dt><span>The drag data item type string</span>
+ <dd><code>application/microdata+json</code></dd>
+
+ <dt><span>The drag data item kind</span>
+ <dd><i>Plain Unicode string</i></dd>
+
+ <dt>The actual data</dt>
+ <dd>The resulting JSON string.</dd>
+
+ </dl>
+
</li>
<!--END complete--><!--END epub--><!--END html-->
@@ -75833,6 +76028,8 @@
<!--
<li>
+ (if you put this back, don't forget to update this text as above)
+
<p>The user agent must take the <span>list of dragged nodes</span>
and <span title="extracting a vCard">extract the vCard data from
those nodes</span>, and then must add the resulting string to the
@@ -75844,6 +76041,8 @@
<li>
+ (if you put this back, don't forget to update this text as above)
+
<p>The user agent must take the <span>list of dragged nodes</span>
and <span title="extracting vEvent data">extract the vEvent data
from those nodes</span>, and then must add the resulting string to
@@ -75854,11 +76053,9 @@
</li>
-->
- <!-- v2: text/html -->
-
<li>
- <p>The user agent must run the following steps:</p>
+ <p>Run the following substeps:</p>
<ol>
@@ -75873,20 +76070,20 @@
<dl>
<dt>If the node is an <code>a</code> element with an <code
- title="attr-hyperlink-href">href</code></dt>
+ title="attr-hyperlink-href">href</code> attribute</dt>
<dd>Add to <var title="">urls</var> the result of <span
title="resolve a url">resolving</span> the element's <code
- title="attr-hyperlink-href">href</code> content attribute relative to
- the element.</dd>
+ title="attr-hyperlink-href">href</code> content attribute
+ relative to the element.</dd>
<dt>If the node is an <code>img</code> element with an <code
- title="attr-img-src">src</code></dt>
+ title="attr-img-src">src</code> attribute</dt>
<dd>Add to <var title="">urls</var> the result of <span
title="resolve a url">resolving</span> the element's <code
- title="attr-img-src">src</code> content attribute relative to the
- element.</dd>
+ title="attr-img-src">src</code> content attribute relative to
+ the element.</dd>
<!-- v2: more -->
@@ -75895,89 +76092,117 @@
</li>
<li><p>If <var title="">urls</var> is still empty, abort these
- steps.</p></li>
+ substeps.</p></li>
<li><p>Let <var title="">url string</var> be the result of
concatenating the strings in <var title="">urls</var>, in the
order they were added, separated by a U+000D CARRIAGE RETURN
U+000A LINE FEED character pair (CRLF).</p></li>
- <li><p>Add <var title="">url string</var> to the <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> member,
- associated with the <code title="">text/uri-list</code>
- format.</p></li>
+ <li><p>Add one item to the <span>drag data store item
+ list</span>, with its properties set as follows:</p>
+ <dl>
+
+ <dt><span>The drag data item type string</span>
+ <dd><code>text/uri-list</code></dd>
+
+ <dt><span>The drag data item kind</span>
+ <dd><i>Plain Unicode string</i></dd>
+
+ <dt>The actual data</dt>
+ <dd><var title="">url string</var></dd>
+
+ </dl>
+
+ </li>
+
</ol>
</li>
- </ul>
+ <li>
- <hr>
+ <p>If it is an element that is being dragged, then set the
+ <span>drag data store list of elements</span> to contain just the
+ <span>source node</span>.</p>
- <p>If the event is canceled, then the drag-and-drop operation must
- not occur; the user agent must not continue with this algorithm.</p>
+ <p>Otherwise, update the <span>drag data store default
+ feedback</span> as appropriate for the user agent (if the user is
+ dragging the selection, then the selection would likely be the
+ basis for this feedback).</p>
- <p>If it is not canceled, then the drag-and-drop operation must be
- initiated.</p>
+ <p class="note">Script can use the <code
+ title="dom-DataTransfer-addElement">addElement()</code> method to
+ add further elements to the list of what is being dragged. (This
+ list is only used for rendering the drag feedback.)</p>
- <p class="note">Since events with no event listeners registered are,
- almost by definition, never canceled, drag-and-drop is always
- available to the user if the author does not specifically prevent
- it.</p>
+ </li>
- <p id="base-dnd-feedback">The drag-and-drop feedback must be
- generated from the first of the following sources that is
- available:</p>
+ <li>
- <ol>
+ <p><span>Fire a DND event</span> named <code
+ title="event-dragstart">dragstart</code> at the <span>source
+ node</span>.</p>
- <li>The element specified in the last call to the <code
- title="dom-DataTransfer-setDragImage">setDragImage()</code> method
- of the <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
- object of the <code title="event-dragstart">dragstart</code> event,
- if the method was called. In visual media, if this is used, the
- <var title="">x</var> and <var title="">y</var> arguments that were
- passed to that method should be used as hints for where to put the
- cursor relative to the resulting image. The values are expressed as
- distances in CSS pixels from the left side and from the top side of
- the image respectively. <a href="#refsCSS">[CSS]</a></li>
+ <p>If the event is canceled, then the drag-and-drop operation
+ should not occur; abort these steps.</p> <!-- only a should
+ because the UA can always allow the user to drag without the page
+ knowing -->
- <li>The elements that were added to the <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> object, both
- before the event was fired, and during the handling of the event
- using the <code
- title="dom-DataTransfer-addElement">addElement()</code>
- method, if any such elements were indeed added.</li>
+ <p class="note">Since events with no event listeners registered
+ are, almost by definition, never canceled, drag-and-drop is always
+ available to the user if the author does not specifically prevent
+ it.</p>
- <li>The selection that the user is dragging.</li>
+ </li>
+ <li>
+
+ <p><span>Initiate the drag-and-drop operation</span> in a manner
+ consistent with platform conventions, and as described below.</p>
+
+ <p id="base-dnd-feedback">The drag-and-drop feedback must be
+ generated from the first of the following sources that is
+ available:</p>
+
+ <ol>
+
+ <li>The <span>drag data store bitmap</span>, if any. In this
+ case, the <span>drag data store hot spot coordinate</span> should
+ be used as hints for where to put the cursor relative to the
+ resulting image. The values are expressed as distances in CSS
+ pixels from the left side and from the top side of the image
+ respectively. <a href="#refsCSS">[CSS]</a></li>
+
+ <li>The elements in the <span>drag data store element
+ list</span>, if any.</li>
+
+ <li>The <span>drag data store default feedback</span>.</li>
+
+ </ol>
+
+ </li>
+
</ol>
- <p>The user agent must take a note of <span
- title="dom-DataTransfer-setData">the data that was placed</span> in
- the <code title="dom-DragEvent-dataTransfer">dataTransfer</code>
- object. This data will be made available again when the <code
- title="event-drop">drop</code> event is fired.</p>
-
- <p>From this point until the end of the drag-and-drop operation,
- device input events (e.g. mouse and keyboard events) must be
- suppressed. In addition, the user agent must track all DOM changes
- made during the drag-and-drop operation, and add them to its <a
- href="#undo">undo history</a> as one atomic operation once the
+ <p>From the moment that the user agent is to <dfn>initiate the
+ drag-and-drop operation</dfn>, until the end of the drag-and-drop
+ operation, device input events (e.g. mouse and keyboard events) must
+ be suppressed. In addition, the user agent must track all DOM
+ changes made during the drag-and-drop operation, and add them to its
+ <a href="#undo">undo history</a> as one atomic operation once the
drag-and-drop operation has ended.</p>
<p>During the drag operation, the element directly indicated by the
user as the drop target is called the <dfn>immediate user
selection</dfn>. (Only elements can be selected by the user; other
- nodes must not be made available as drop targets.)
+ nodes must not be made available as drop targets.) However, the
+ <span>immediate user selection</span> is not necessarily the
+ <dfn>current target element</dfn>, which is the element currently
+ selected for the drop part of the drag-and-drop operation.</p>
- However, the <span>immediate user selection</span> is not
- necessarily the <dfn>current target element</dfn>, which is the
- element currently selected for the drop part of the drag-and-drop
- operation.
-
- The <span>immediate user selection</span> changes as the user
+ <p>The <span>immediate user selection</span> changes as the user
selects different elements (either by pointing at them with a
pointing device, or by selecting them in some other way). The
<span>current target element</span> changes when the <span>immediate
@@ -75992,11 +76217,14 @@
<span>current target element</span> is initially null.</p>
<p>In addition, there is also a <dfn>current drag operation</dfn>,
- which can take on the values "none", "copy", "link", and "move".
- Initially, it has the value "none". It is updated by the user agent
- as described in the steps below.</p>
+ which can take on the values "<code title="">none</code>", "<code
+ title="">copy</code>", "<code title="">link</code>", and "<code
+ title="">move</code>". Initially, it has the value "<code
+ title="">none</code>". It is updated by the user agent as described
+ in the steps below.</p>
- <p>User agents must, as soon as the drag operation is initiated and
+ <p>User agents must, as soon as the drag operation is <span
+ title="initiate the drag-and-drop operation">initiated</span> and
every 350ms (±200ms) thereafter for as long as the drag
operation is ongoing, <span>queue a task</span> to perform the
following steps in sequence:</p>
@@ -76006,60 +76234,61 @@
<li>
<p>If the user agent is still performing the previous iteration of
- the sequence (if any) when the next iteration becomes due, the
- user agent must not execute the overdue iteration, effectively
- "skipping missed frames" of the drag-and-drop operation.</p>
+ the sequence (if any) when the next iteration becomes due, abort
+ these steps for this iteration (effectively "skipping missed
+ frames" of the drag-and-drop operation).</p>
</li>
<li>
- <p>The user agent must fire a <code title="event-drag">drag</code>
- event at the <span>source node</span>. If this event is canceled,
- the user agent must set the <span>current drag operation</span> to
- none (no drag operation).</p>
+ <p><span>Fire a DND event</span> named <code
+ title="event-drag">drag</code> event at the <span>source
+ node</span>. If this event is canceled, the user agent must set
+ the <span>current drag operation</span> to "<code
+ title="">none</code>" (no drag operation).</p>
</li>
<li>
- <p>Next, if the <code title="event-drag">drag</code> event was not
+ <p>If the <code title="event-drag">drag</code> event was not
canceled and the user has not ended the drag-and-drop operation,
- the user agent must check the state of the drag-and-drop
- operation, as follows:</p>
+ check the state of the drag-and-drop operation, as follows:</p>
<ol>
<li>
- <p>First, if the user is indicating a different <span>immediate
- user selection</span> than during the last iteration (or if this
- is the first iteration), and if this <span>immediate user
+ <p>If the user is indicating a different <span>immediate user
+ selection</span> than during the last iteration (or if this is
+ the first iteration), and if this <span>immediate user
selection</span> is not the same as the <span>current target
- element</span>, then the <span>current target element</span> must
- be updated, as follows:</p>
+ element</span>, then update the <span>current target
+ element</span> as follows:</p>
<dl class="switch">
<dt>If the new <span>immediate user selection</span> is null, or
is in a non-DOM document or application</dt>
- <dd><p>The user agent must set the <span>current target
- element</span> to the same value.</p></dd>
+ <dd><p>Set the <span>current target element</span> to the same
+ value.</p></dd>
<dt>Otherwise</dt>
<dd>
- <p>The user agent must fire a <code
- title="event-dragenter">dragenter</code> event at the
+ <p><span>Fire a DND event</span> named <code
+ title="event-dragenter">dragenter</code> at the
<span>immediate user selection</span>.</p>
- <p>If the event is canceled, then the <span>current target
- element</span> must be set to the <span>immediate user
+ <p>If the event is canceled, then set the <span>current target
+ element</span> to the <span>immediate user
selection</span>.</p>
- <p>Otherwise, the user agent must act as follows:</p>
+ <p>Otherwise, run the appropriate step from the following
+ list:</p>
<dl class="switch">
@@ -76070,27 +76299,32 @@
title="attr-input-type-text">Text</span> state) or an
<span>editable</span> element</dt>
- <dd><p>The <span>current target element</span> must be set to
- the <span>immediate user selection</span> anyway.</p></dd>
+ <dd><p>Set the <span>current target element</span> to the
+ <span>immediate user selection</span> anyway.</p></dd>
<dt>If the <span>current target element</span> is
<span>the body element</span></dt>
- <dd><p>The <span>current target element</span> is left
+ <dd><p>Leave the <span>current target element</span>
unchanged.</p></dd>
<dt>Otherwise</dt>
- <dd><p>The user agent must fire a <code
- title="event-dragenter">dragenter</code> event at <span>the
- body element</span>, and the <span>current target
- element</span> must be set to <span>the body element</span>,
- regardless of whether that event was canceled or not. (If
- <span>the body element</span> is null, then the <span>current
- target element</span> would be set to null too in this case,
- it wouldn't be set to the <code>Document</code>
- object.)</p></dd>
+ <dd>
+ <p><span>Fire a DND event</span> named <code
+ title="event-dragenter">dragenter</code> at <span>the body
+ element</span>, and set the <span>current target
+ element</span> to <span>the body element</span>, regardless
+ of whether that event was canceled or not.</p>
+
+ <p class="note">If <span>the body element</span> is null,
+ then the event will be fired at the <code>Document</code>
+ object (as required by the definition of <span>the body
+ element</span>), but the <span>current target element</span>
+ would be set to null, not the <code>Document</code>
+ object.</p></dd>
+
</dl>
</dd>
@@ -76103,21 +76337,23 @@
<p>If the previous step caused the <span>current target
element</span> to change, and if the previous target element was
- not null or a part of a non-DOM document, the user agent must fire
- a <code title="event-dragleave">dragleave</code> event at the
- previous target element.</p>
+ not null or a part of a non-DOM document, then <span>fire a DND
+ event</span> named <code
+ title="event-dragleave">dragleave</code> at the previous target
+ element.</p>
</li>
<li>
<p>If the <span>current target element</span> is a DOM element,
- the user agent must fire a <code
- title="event-dragover">dragover</code> event at this <span>current
+ then <span>fire a DND event</span> named <code
+ title="event-dragover">dragover</code> at this <span>current
target element</span>.</p>
<p>If the <code title="event-dragover">dragover</code> event is
- not canceled, the user agent must act as follows:</p>
+ not canceled, run the appropriate step from the following
+ list:</p>
<dl class="switch">
@@ -76127,26 +76363,27 @@
the <span title="attr-input-type-text">Text</span> state) or an
<span>editable</span> element</dt>
- <dd><p>The user agent must set the <span>current drag
- operation</span> to either "copy" or "move", as appropriate
- given the platform conventions.</p></dd>
+ <dd><p>Set the <span>current drag operation</span> to either
+ "<code title="">copy</code>" or "<code title="">move</code>",
+ as appropriate given the platform conventions.</p></dd>
<dt>Otherwise</dt>
- <dd><p>The user agent must reset the <span>current drag
- operation</span> to "none".</p></dd>
+ <dd><p>Reset the <span>current drag operation</span> to "<code
+ title="">none</code>".</p></dd>
</dl>
<p>Otherwise (if the <code
title="event-dragover">dragover</code> event <em>is</em>
- canceled), the <span>current drag operation</span> must be set
- based on the values the <code
+ canceled), set the <span>current drag operation</span> based on
+ the values of the <code
title="dom-DataTransfer-effectAllowed">effectAllowed</code> and
<code title="dom-DataTransfer-dropEffect">dropEffect</code>
- attributes of the <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> object
- had after the event was handled, as per the following table:</p>
+ attributes of the <code>DragEvent</code> object's <code
+ title="dom-DragEvent-dataTransfer">dataTransfer</code> object as
+ they stood after the event dispatch finished, as per the
+ following table:</p>
<table>
<thead>
@@ -76157,31 +76394,30 @@
</tr>
</thead>
<tr>
- <td><code title="">uninitialized</code>, <code title="">copy</code>, <code title="">copyLink</code>, <code title="">copyMove</code>, or <code title="">all</code></td>
- <td><code title="">copy</code></td>
- <td>"copy"</td>
+ <td>"<code title="">uninitialized</code>", "<code title="">copy</code>", "<code title="">copyLink</code>", "<code title="">copyMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">copy</code>"</td>
+ <td>"<code title="">copy</code>"</td>
</tr>
<tr>
- <td><code title="">uninitialized</code>, <code title="">link</code>, <code title="">copyLink</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
- <td><code title="">link</code></td>
- <td>"link"</td>
+ <td>"<code title="">uninitialized</code>", "<code title="">link</code>", "<code title="">copyLink</code>", "<code title="">linkMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">link</code>"</td>
+ <td>"<code title="">link</code>"</td>
</tr>
<tr>
- <td><code title="">uninitialized</code>, <code title="">move</code>, <code title="">copyMove</code>, <code title="">linkMove</code>, or <code title="">all</code></td>
- <td><code title="">move</code></td>
- <td>"move"</td>
+ <td>"<code title="">uninitialized</code>", "<code title="">move</code>", "<code title="">copyMove</code>", "<code title="">linkMove</code>", or "<code title="">all</code>"</td>
+ <td>"<code title="">move</code>"</td>
+ <td>"<code title="">move</code>"</td>
</tr>
<tr>
<td colspan="2">Any other case</td>
- <td>"none"</td>
+ <td>"<code title="">none</code>"</td>
</tr>
</table>
<p>Then, regardless of whether the <code
title="event-dragover">dragover</code> event was canceled or
- not, the drag feedback (e.g. the mouse cursor) must be updated
- to match the <span>current drag operation</span>, as
- follows:</p>
+ not, update the drag feedback (e.g. the mouse cursor) to match
+ the <span>current drag operation</span>, as follows:</p>
<table>
<thead>
@@ -76191,19 +76427,19 @@
</tr>
</thead>
<tr>
- <td>"copy"</td>
+ <td>"<code title="">copy</code>"</td>
<td>Data will be copied if dropped here.</td>
</tr>
<tr>
- <td>"link"</td>
+ <td>"<code title="">link</code>"</td>
<td>Data will be linked if dropped here.</td>
</tr>
<tr>
- <td>"move"</td>
+ <td>"<code title="">move</code>"</td>
<td>Data will be moved if dropped here.</td>
</tr>
<tr>
- <td>"none"</td>
+ <td>"<code title="">none</code>"</td>
<td>No operation allowed, dropping here will cancel the drag-and-drop operation.</td>
</tr>
</table>
@@ -76212,10 +76448,11 @@
<li>
- <p>Otherwise, if the <span>current target element</span> is not a
- DOM element, the user agent must use platform-specific mechanisms
- to determine what drag operation is being performed (none, copy,
- link, or move). This sets the <em>current drag operation</em>.</p>
+ <p>Otherwise, if the <span>current target element</span> is not
+ a DOM element, use platform-specific mechanisms to determine
+ what drag operation is being performed (none, copy, link, or
+ move), and set the <i>current drag operation</i>
+ accordingly.</p>
</li>
@@ -76228,111 +76465,110 @@
<p>Otherwise, if the user ended the drag-and-drop operation (e.g.
by releasing the mouse button in a mouse-driven drag-and-drop
interface), or if the <code title="event-drag">drag</code> event
- was canceled, then this will be the last iteration. The user agent
- must execute the following steps, then stop looping.</p>
+ was canceled, then this will be the last iteration. Run the
+ following steps, then stop the drag-and-drop operation:</p>
<ol>
<li>
- <p>If the <span>current drag operation</span> is none (no drag
- operation), or, if the user ended the drag-and-drop operation by
- canceling it (e.g. by hitting the <kbd>Escape</kbd> key), or if
- the <span>current target element</span> is null, then the drag
- operation failed. If the <span>current target element</span> is
- a DOM element, the user agent must fire a <code
- title="event-dragleave">dragleave</code> event at it; otherwise,
- if it is not null, it must use platform-specific conventions for
- drag cancellation.</p>
+ <p>If the <span>current drag operation</span> is "<code
+ title="">none</code>" (no drag operation), or, if the user ended
+ the drag-and-drop operation by canceling it (e.g. by hitting the
+ <kbd>Escape</kbd> key), or if the <span>current target
+ element</span> is null, then the drag operation failed. Run
+ these substeps:</p>
- </li>
+ <ol>
- <li>
+ <li><p>Let <var title="">dropped</var> be false.</p></li>
- <p>Otherwise, the drag operation was as success. If the
- <span>current target element</span> is a DOM element, the user
- agent must fire a <code title="event-drop">drop</code> event at
- it; otherwise, it must use platform-specific conventions for
- indicating a drop.</p>
+ <li><p>If the <span>current target element</span> is a DOM
+ element, <span>fire a DND event</span> named <code
+ title="event-dragleave">dragleave</code> at it; otherwise, if
+ it is not null, use platform-specific conventions for drag
+ cancellation.</p>
- <p>When the target is a DOM element, the <code
- title="dom-DataTransfer-dropEffect">dropEffect</code> attribute
- of the event's <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> object
- must be given the value representing the <span>current drag
- operation</span> (<code title="">copy</code>, <code
- title="">link</code>, or <code title="">move</code>), and the
- object must be set up so that the <code
- title="dom-DataTransfer-getData">getData()</code> method will
- return the data that was added during the <code
- title="event-dragstart">dragstart</code> event, and the <code
- title="dom-datatransfer-files">files</code> attribute will
- return a <code>FileList</code> object with any files that were
- dragged.</p>
+ </ol>
- <p>If the event is canceled, the <span>current drag
- operation</span> must be set to the value of the <code
- title="dom-DataTransfer-dropEffect">dropEffect</code> attribute
- of the event's <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> object as
- it stood after the event was handled.</p>
+ <p>Otherwise, the drag operation was as success; run these substeps:</p>
- <p>Otherwise, the event is not canceled, and the user agent must
- perform the event's default action, which depends on the exact
- target as follows:</p>
+ <ol>
- <dl class="switch">
+ <li><p>Let <var title="">dropped</var> be true.</p></li>
- <dt>If the <span>current target element</span> is a text field
- (e.g. <code>textarea</code>, or an <code>input</code> element
- whose <code title="attr-input-type">type</code> attribute is in
- the <span title="attr-input-type-text">Text</span> state) or an
- <span>editable</span> element</dt>
+ <li><p>If the <span>current target element</span> is a DOM
+ element, <span>fire a DND event</span> named <code
+ title="event-drop">drop</code> at it; otherwise, use
+ platform-specific conventions for indicating a drop.</p></li>
- <dd>The user agent must insert the data associated with the
- <code>text/plain</code> format, if any, into the text field or
- <span>editable</span> element in a manner consistent with
- platform-specific conventions (e.g. inserting it at the current
- mouse cursor position, or inserting it at the end of the
- field).</dd>
+ <li>
- <dt>Otherwise</dt>
+ <p>If the event is canceled, set the <span>current drag
+ operation</span> to the value of the <code
+ title="dom-DataTransfer-dropEffect">dropEffect</code> attribute
+ of the <code>DragEvent</code> object's <code
+ title="dom-DragEvent-dataTransfer">dataTransfer</code> object
+ as it stood after the event dispatch finished.</p>
- <dd>Reset the <span>current drag operation</span> to
- "none".</dd>
+ <p>Otherwise, the event is not canceled; perform the event's
+ default action, which depends on the exact target as
+ follows:</p>
- </dl>
+ <dl class="switch">
+ <dt>If the <span>current target element</span> is a text field
+ (e.g. <code>textarea</code>, or an <code>input</code> element
+ whose <code title="attr-input-type">type</code> attribute is in
+ the <span title="attr-input-type-text">Text</span> state) or an
+ <span>editable</span> element</dt>
+
+ <dd><p>If the <span>drag data store item list</span> has an
+ item with <span>the drag data item type string</span>
+ "<code>text/plain</code>" and <span>the drag data item
+ kind</span> <i>Plain Unicode string</i>, insert the actual data
+ of that item into the text field or <span>editable</span>
+ element in a manner consistent with platform-specific
+ conventions (e.g. inserting it at the current mouse cursor
+ position, or inserting it at the end of the field).</p></dd>
+
+ <dt>Otherwise</dt>
+
+ <dd><p>Reset the <span>current drag operation</span> to
+ "<code title="">none</code>".</p>~</dd>
+
+ </dl>
+
+ </li>
+
+ </ol>
+
</li>
<li>
- <p>Finally, the user agent must fire a <code
- title="event-dragend">dragend</code> event at the <span>source
- node</span>, with the <code
- title="dom-DataTransfer-dropEffect">dropEffect</code> attribute
- of the event's <code
- title="dom-DragEvent-dataTransfer">dataTransfer</code> object
- being set to the value corresponding to the <span>current drag
- operation</span>.</p>
+ <p><span>Fire a DND event</span> named <code
+ title="event-dragend">dragend</code> at the <span>source
+ node</span>.</p>
- <p class="note">The <span>current drag operation</span> can
- change during the processing of the <code
- title="event-drop">drop</code> event, if one was fired.</p>
+ </li>
- <p>The event is not cancelable. After the event has been
- handled, the user agent must act as follows:</p>
+ <li>
+ <p>Run the appropriate steps from the following list as the
+ default action of the <code title="event-dragend">dragend</code>
+ event:</p>
+
<dl class="switch">
<dt>If the <span>current target element</span> is a text field
(e.g. <code>textarea</code>, or an <code>input</code> element
whose <code title="attr-input-type">type</code> attribute is in
the <span title="attr-input-type-text">Text</span> state), and
- a <code title="event-drop">drop</code> event was fired in the
- previous step, and the <span>current drag operation</span> is
- "move", and the source of the drag-and-drop operation is a
- selection in the DOM</dt>
+ <var title="">dropped</var> is true, and the <span>current drag
+ operation</span> is "<code title="">move</code>", and the
+ source of the drag-and-drop operation is a selection in the
+ DOM</dt>
<dd>The user agent should delete the range representing the
dragged selection from the DOM.</dd>
@@ -76341,10 +76577,10 @@
(e.g. <code>textarea</code>, or an <code>input</code> element
whose <code title="attr-input-type">type</code> attribute is in
the <span title="attr-input-type-text">Text</span> state), and
- a <code title="event-drop">drop</code> event was fired in the
- previous step, and the <span>current drag operation</span> is
- "move", and the source of the drag-and-drop operation is a
- selection in a text field</dt>
+ <var title="">dropped</var> is true, and the <span>current drag
+ operation</span> is "<code title="">move</code>", and the
+ source of the drag-and-drop operation is a selection in a text
+ field</dt>
<dd>The user agent should delete the dragged selection from the
relevant text field.</dd>
@@ -76421,6 +76657,119 @@
</div>
+ <h4 id="dndevents">Events summary</h4>
+
+ <p><i>This section is non-normative.</i></p>
+
+ <p>The following events are involved in the drag-and-drop
+ model.</p>
+
+ <table>
+
+ <thead>
+ <tr>
+ <th> Event Name </th>
+ <th> Target </th>
+ <!-- <th> Bubbles? </th> -->
+ <th> Cancelable? </th>
+ <th> <span>Drag data store mode</span> </th>
+ <!-- <th> <code title="dom-DataTransfer-effectAllowed">effectAllowed</code> </th> -->
+ <th> <code title="dom-DataTransfer-dropEffect">dropEffect</code> </th>
+ <th> Default Action </th>
+ </tr>
+ </thead>
+
+ <tbody>
+
+ <tr>
+ <td><dfn title="event-dragstart"><code>dragstart</code></dfn></td>
+ <td><span>Source node</span></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><span title="concept-dnd-rw">Read/write mode</span>
+ <!-- <td>"<code title="">uninitialized</code>"</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>Initiate the drag-and-drop operation</td>
+ </tr>
+
+ <tr>
+ <td><dfn title="event-drag"><code>drag</code></dfn></td>
+ <td><span>Source node</span></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><span title="concept-dnd-p">Protected mode</span>
+ <!-- <td>Same as last event</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>Continue the drag-and-drop operation</td>
+ </tr>
+
+ <tr>
+ <td><dfn title="event-dragenter"><code>dragenter</code></dfn></td>
+ <td><span>Immediate user selection</span> or <span>the body element</span></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><span title="concept-dnd-p">Protected mode</span>
+ <!-- <td>Same as last event</td> -->
+ <td><a href="#dropEffect-initialization">Based on <code>effectAllowed</code> value</a></td>
+ <td>Reject <span>immediate user selection</span> as potential <span title="current target element">target element</span></td>
+ </tr>
+
+ <tr>
+ <td><dfn title="event-dragleave"><code>dragleave</code></dfn></td>
+ <td><span title="current target element">Previous target element</span></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>—</td>
+ <td><span title="concept-dnd-p">Protected mode</span>
+ <!-- <td>Same as last event</td> -->
+ <td>"<code title="">none</code>"</td>
+ <td>None</td>
+ </tr>
+
+ <tr>
+ <td><dfn title="event-dragover"><code>dragover</code></dfn></td>
+ <td><span>Current target element</span></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><span title="concept-dnd-p">Protected mode</span>
+ <!-- <td>Same as last event</td> -->
+ <td><a href="#dropEffect-initialization">Based on <code>effectAllowed</code> value</a></td>
+ <td>Reset the <span>current drag operation</span> to "none"</td>
+ </tr>
+
+ <tr>
+ <td><dfn title="event-drop"><code>drop</code></dfn></td>
+ <td><span>Current target element</span></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>✓ Cancelable</td>
+ <td><span title="concept-dnd-ro">Read-only mode</span>
+ <!-- <td>Same as last event</td> -->
+ <td><span>Current drag operation</span></td>
+ <td>Varies</td>
+ </tr>
+
+ <tr>
+ <td><dfn title="event-dragend"><code>dragend</code></dfn></td>
+ <td><span>Source node</span></td>
+ <!-- <td>✓ Bubbles</td> -->
+ <td>—</td>
+ <td><span title="concept-dnd-p">Protected mode</span>
+ <!-- <td>Same as last event</td> -->
+ <td><span>Current drag operation</span></td>
+ <td>Varies</td>
+ </tr>
+
+ </tbody>
+
+ </table>
+
+ <p>Not shown in the above table: all these events bubble, and the
+ <code title="dom-DataTransfer-effectAllowed">effectAllowed</code>
+ attribute always has the value it had after the previous event was
+ fired, defaulting to "<code title="">uninitialized</code>" in the
+ <code title="event-dragstart">dragstart</code> event.</p>
+
+
+
<h4>The <dfn title="attr-draggable"><code>draggable</code></dfn> attribute</h4>
<p>All <span>HTML elements</span> may have the <code
More information about the Commit-Watchers
mailing list