- From: Michael Smith via cvs-syncmail <cvsmail@w3.org>
- Date: Fri, 18 Sep 2009 06:57:07 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/spec-author-view
In directory hutz:/tmp/cvs-serv19348
Modified Files:
Overview.html acknowledgements.html browsers.html comms.html
dom.html editing.html embedded-content-0.html forms.html
history.html iana-considerations.html index.html
infrastructure.html interactive-elements.html
introduction.html microdata.html
named-character-references.html no.html obsolete.html
offline.html references.html semantics.html spec.html
syntax.html tabular-data.html text-level-semantics.html
the-canvas-element.html the-xhtml-syntax.html video.html
Log Message:
Drag and drop model documentation. (whatwg r3889)
[updated by splitter]
Index: infrastructure.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/infrastructure.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- infrastructure.html 18 Sep 2009 05:16:54 -0000 1.166
+++ infrastructure.html 18 Sep 2009 06:57:04 -0000 1.167
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="introduction.html">← 1 Introduction</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: text-level-semantics.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/text-level-semantics.html,v
retrieving revision 1.164
retrieving revision 1.165
diff -u -d -r1.164 -r1.165
--- text-level-semantics.html 18 Sep 2009 05:16:55 -0000 1.164
+++ text-level-semantics.html 18 Sep 2009 06:57:05 -0000 1.165
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="semantics.html">← 4 The elements of HTML</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: history.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/history.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- history.html 18 Sep 2009 05:16:54 -0000 1.166
+++ history.html 18 Sep 2009 06:57:04 -0000 1.167
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="offline.html">← 6.7 Offline Web applications</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: tabular-data.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/tabular-data.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- tabular-data.html 18 Sep 2009 05:16:55 -0000 1.165
+++ tabular-data.html 18 Sep 2009 06:57:05 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="the-canvas-element.html">← 4.8.11 The canvas element</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: microdata.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/microdata.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- microdata.html 18 Sep 2009 05:16:54 -0000 1.165
+++ microdata.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="interactive-elements.html">← 4.11 Interactive elements</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/Overview.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- Overview.html 18 Sep 2009 05:16:53 -0000 1.165
+++ Overview.html 18 Sep 2009 06:57:03 -0000 1.166
@@ -240,7 +240,7 @@
</dl><p>This specification is available in the following formats:
<a href="spec.html">single page HTML</a>,
<a href="Overview.html">multipage HTML</a>.
-This is revision 1.3051.
+This is revision 1.3052.
</p>
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a>
© 2009 <a href="http://www.w3.org/"><abbr title="World Wide
Index: embedded-content-0.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/embedded-content-0.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- embedded-content-0.html 18 Sep 2009 05:16:53 -0000 1.165
+++ embedded-content-0.html 18 Sep 2009 06:57:03 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="dom.html">← 3 Semantics, structure, and APIs of HTML documents</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: dom.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/dom.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- dom.html 18 Sep 2009 05:16:53 -0000 1.166
+++ dom.html 18 Sep 2009 06:57:03 -0000 1.167
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="infrastructure.html">← 2 Common infrastructure</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: acknowledgements.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/acknowledgements.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- acknowledgements.html 18 Sep 2009 05:16:53 -0000 1.165
+++ acknowledgements.html 18 Sep 2009 06:57:03 -0000 1.166
@@ -217,7 +217,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="references.html">← References</a> –
<a href="Overview.html#contents">Table of contents</a>
Index: the-canvas-element.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/the-canvas-element.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- the-canvas-element.html 18 Sep 2009 05:16:55 -0000 1.165
+++ the-canvas-element.html 18 Sep 2009 06:57:05 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="video.html">← 4.8.7 The video element</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: iana-considerations.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/iana-considerations.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- iana-considerations.html 18 Sep 2009 05:16:54 -0000 1.165
+++ iana-considerations.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="no.html">← 12 Things that you can't do with this specification because they are better handled using other technologies that are further described herein</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: forms.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/forms.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- forms.html 18 Sep 2009 05:16:54 -0000 1.165
+++ forms.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="tabular-data.html">← 4.9 Tabular data</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: interactive-elements.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/interactive-elements.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- interactive-elements.html 18 Sep 2009 05:16:54 -0000 1.165
+++ interactive-elements.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="forms.html">← 4.10 Forms</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: editing.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/editing.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- editing.html 18 Sep 2009 05:16:53 -0000 1.165
+++ editing.html 18 Sep 2009 06:57:03 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="history.html">← 6.8 Session history and navigation</a> –
<a href="Overview.html#contents">Table of contents</a> –
@@ -800,7 +800,88 @@
the drop could be triggered by the mouse being released.</p><p>On media without a pointing device, the user would probably have
to explicitly indicate his intention to perform a drag-and-drop
operation, stating what he wishes to drag and what he wishes to
- drop, respectively.</p><h4 id="introduction-4"><span class="secno">7.9.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p class="XXX">It's also currently non-existent.</p><h4 id="the-dragevent-and-datatransfer-interfaces"><span class="secno">7.9.2 </span>The <code><a href="#dragevent">DragEvent</a></code> and <code><a href="#datatransfer">DataTransfer</a></code> interfaces</h4><p>The drag-and-drop processing model involves several events. They
+ drop, respectively.</p><h4 id="introduction-4"><span class="secno">7.9.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p>To make an element draggable is simple: give the element a <code title="attr-draggable"><a href="#the-draggable-attribute">draggable</a></code> attribute, and set an event
+ listener for <code title="event-dragstart"><a href="#event-dragstart">dragstart</a></code> that
+ stores the data being dragged.</p><p>The event handler typically needs to check that it's not a text
+ selection that is being dragged, and then needs to store data into
+ the <code><a href="#datatransfer">DataTransfer</a></code> object and set the allowed effects
+ (copy, move, link, or some combination).</p><p>For example:</p><pre><p>What fruits do you like?</p>
+<ol ondragstart="dragStartHandler(event)">
+ <li draggable data-value="fruit-apple">Apples</li>
+ <li draggable data-value="fruit-orange">Oranges</li>
+ <li draggable data-value="fruit-pear">Pears</li>
+</ol>
+<script>
+ var internalDNDType = 'text/x-example'; // set this to something specific to your site
+ function dragStartHandler(event) {
+ if (event.target instanceof HTMLLIElement) {
+ // use the element's data-value="" attribute as the value to be moving:
+ event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
+ event.effectAllowed = 'move'; // only allow moves
+ } else {
+ event.preventDefault(); // don't allow selection to be dragged
+ }
+ }
+</script></pre><hr><p>To accept a drop, the drop target has to listen to at least three
+ events. First, the <code title="event-dragenter"><a href="#event-dragenter">dragenter</a></code>
+ event, which is used to determine whether or not the drop target is
+ to accept the drop. If the drop is to be accepted, then this event
+ has to be canceled. Second, the <code title="event-dragover"><a href="#event-dragover">dragover</a></code> event, which is used to
+ determine what feedback is to be shown to the user. If the event is
+ not canceled, then the feedback (typically the cursor) is updated
+ based on the <code title="dom-DataTransfer-DropEffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code> attribute's
+ value, as set by the event handler. Finally, the <code title="event-drop"><a href="#event-drop">drop</a></code> event, which allows the actual drop
+ to be performed. This event also needs to be canceled so that the
+ <code title="dom-DataTransfer-DropEffect"><a href="#dom-datatransfer-dropeffect">dropEffect</a></code>
+ attribute's value can be used by the source (otherwise it's
+ reset).</p><p>For example:</p><pre><p>Drop your favourite fruits below:</p>
+<ol class="dropzone"
+ ondragenter="dragEnterHandler(event)"
+ ondragover="dragOverHandler(event)"
+ ondrop="dropHandler(event)">
+</ol>
+<script>
+ var internalDNDType = 'text/x-example'; // set this to something specific to your site
+ function dragEnterHandler(event) {
+ // cancel the event if the drag contains data of our type
+ if (event.dataTransfer.types.contains(internalDNDType)
+ event.preventDefault();
+ }
+ function dragOverHandler(event) {
+ event.dataTransfer.dropEffect = 'move';
+ event.preventDefault();
+ }
+ function dropHandler(event) {
+ // drop the data
+ var li = document.createElement('li');
+ var data = event.dataTransfer.getData(internalDNDType);
+ if (data == 'fruit-apple') {
+ li.textContent = 'Apples';
+ } else if (data == 'fruit-orange') {
+ li.textContent = 'Oranges';
+ } else if (data == 'fruit-pear') {
+ li.textContent = 'Pears';
+ } else {
+ li.textContent = 'Unknown Fruit';
+ }
+ event.target.appendChild(li);
+ }
+</script></pre><hr><p>To remove the original element (the one that was dragged) from
+ the display, the <code title="event-dragend"><a href="#event-dragend">dragend</a></code> event
+ can be used.</p><p>For our example here, that means updating the original markup to
+ handle that event:</p><pre><p>What fruits do you like?</p>
+<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
+ <em>...as before...</em>
+</ol>
+<script>
+ function dragStartHandler(event) {
+ // <em>...as before...</em>
+ }
+ function dragEndHandler(event) {
+ // remove the dragged element
+ event.target.parentNode.removeChild(event.target);
+ }
+</script></pre><h4 id="the-dragevent-and-datatransfer-interfaces"><span class="secno">7.9.2 </span>The <code><a href="#dragevent">DragEvent</a></code> and <code><a href="#datatransfer">DataTransfer</a></code> interfaces</h4><p>The drag-and-drop processing model involves several events. They
all use the <code><a href="#dragevent">DragEvent</a></code> interface.</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>;
Index: video.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/video.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- video.html 18 Sep 2009 05:16:55 -0000 1.165
+++ video.html 18 Sep 2009 06:57:05 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="text-level-semantics.html">← 4.6 Text-level semantics</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: browsers.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/browsers.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- browsers.html 18 Sep 2009 05:16:53 -0000 1.166
+++ browsers.html 18 Sep 2009 06:57:03 -0000 1.167
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="microdata.html">← 5 Microdata</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: the-xhtml-syntax.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/the-xhtml-syntax.html,v
retrieving revision 1.164
retrieving revision 1.165
diff -u -d -r1.164 -r1.165
--- the-xhtml-syntax.html 18 Sep 2009 05:16:55 -0000 1.164
+++ the-xhtml-syntax.html 18 Sep 2009 06:57:05 -0000 1.165
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="named-character-references.html">← 9.2 Named character references</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: offline.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/offline.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- offline.html 18 Sep 2009 05:16:54 -0000 1.165
+++ offline.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="browsers.html">← 6 Web browsers</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: syntax.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/syntax.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- syntax.html 18 Sep 2009 05:16:55 -0000 1.166
+++ syntax.html 18 Sep 2009 06:57:05 -0000 1.167
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="comms.html">← 8 Communication</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: obsolete.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/obsolete.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- obsolete.html 18 Sep 2009 05:16:54 -0000 1.166
+++ obsolete.html 18 Sep 2009 06:57:04 -0000 1.167
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="the-xhtml-syntax.html">← 10 The XHTML syntax</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: named-character-references.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/named-character-references.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- named-character-references.html 18 Sep 2009 05:16:54 -0000 1.166
+++ named-character-references.html 18 Sep 2009 06:57:04 -0000 1.167
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="syntax.html">← 9 The HTML syntax</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: references.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/references.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- references.html 18 Sep 2009 05:16:54 -0000 1.165
+++ references.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="index.html">← Index</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: semantics.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/semantics.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- semantics.html 18 Sep 2009 05:16:54 -0000 1.165
+++ semantics.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="embedded-content-0.html">← 3.2.5.1.6 Embedded content</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: index.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/index.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- index.html 18 Sep 2009 05:16:54 -0000 1.165
+++ index.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="iana-considerations.html">← IANA considerations</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: comms.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/comms.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- comms.html 18 Sep 2009 05:16:53 -0000 1.165
+++ comms.html 18 Sep 2009 06:57:03 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="editing.html">← 7 User Interaction</a> –
<a href="Overview.html#contents">Table of contents</a> –
Index: spec.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/spec.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- spec.html 18 Sep 2009 05:16:54 -0000 1.166
+++ spec.html 18 Sep 2009 06:57:04 -0000 1.167
@@ -238,7 +238,7 @@
</dl><p>This specification is available in the following formats:
<a href=spec.html>single page HTML</a>,
<a href=Overview.html>multipage HTML</a>.
-This is revision 1.3051.
+This is revision 1.3052.
</p>
<p class=copyright><a href=http://www.w3.org/Consortium/Legal/ipr-notice#Copyright>Copyright</a>
© 2009 <a href=http://www.w3.org/><abbr title="World Wide
@@ -24722,7 +24722,88 @@
the drop could be triggered by the mouse being released.</p><p>On media without a pointing device, the user would probably have
to explicitly indicate his intention to perform a drag-and-drop
operation, stating what he wishes to drag and what he wishes to
- drop, respectively.</p><h4 id=introduction-4><span class=secno>7.9.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p class=XXX>It's also currently non-existent.</p><h4 id=the-dragevent-and-datatransfer-interfaces><span class=secno>7.9.2 </span>The <code><a href=#dragevent>DragEvent</a></code> and <code><a href=#datatransfer>DataTransfer</a></code> interfaces</h4><p>The drag-and-drop processing model involves several events. They
+ drop, respectively.</p><h4 id=introduction-4><span class=secno>7.9.1 </span>Introduction</h4><p><i>This section is non-normative.</i></p><p>To make an element draggable is simple: give the element a <code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code> attribute, and set an event
+ listener for <code title=event-dragstart><a href=#event-dragstart>dragstart</a></code> that
+ stores the data being dragged.</p><p>The event handler typically needs to check that it's not a text
+ selection that is being dragged, and then needs to store data into
+ the <code><a href=#datatransfer>DataTransfer</a></code> object and set the allowed effects
+ (copy, move, link, or some combination).</p><p>For example:</p><pre><p>What fruits do you like?</p>
+<ol ondragstart="dragStartHandler(event)">
+ <li draggable data-value="fruit-apple">Apples</li>
+ <li draggable data-value="fruit-orange">Oranges</li>
+ <li draggable data-value="fruit-pear">Pears</li>
+</ol>
+<script>
+ var internalDNDType = 'text/x-example'; // set this to something specific to your site
+ function dragStartHandler(event) {
+ if (event.target instanceof HTMLLIElement) {
+ // use the element's data-value="" attribute as the value to be moving:
+ event.dataTransfer.setData(internalDNDType, event.target.dataset.value);
+ event.effectAllowed = 'move'; // only allow moves
+ } else {
+ event.preventDefault(); // don't allow selection to be dragged
+ }
+ }
+</script></pre><hr><p>To accept a drop, the drop target has to listen to at least three
+ events. First, the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code>
+ event, which is used to determine whether or not the drop target is
+ to accept the drop. If the drop is to be accepted, then this event
+ has to be canceled. Second, the <code title=event-dragover><a href=#event-dragover>dragover</a></code> event, which is used to
+ determine what feedback is to be shown to the user. If the event is
+ not canceled, then the feedback (typically the cursor) is updated
+ based on the <code title=dom-DataTransfer-DropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code> attribute's
+ value, as set by the event handler. Finally, the <code title=event-drop><a href=#event-drop>drop</a></code> event, which allows the actual drop
+ to be performed. This event also needs to be canceled so that the
+ <code title=dom-DataTransfer-DropEffect><a href=#dom-datatransfer-dropeffect>dropEffect</a></code>
+ attribute's value can be used by the source (otherwise it's
+ reset).</p><p>For example:</p><pre><p>Drop your favourite fruits below:</p>
+<ol class="dropzone"
+ ondragenter="dragEnterHandler(event)"
+ ondragover="dragOverHandler(event)"
+ ondrop="dropHandler(event)">
+</ol>
+<script>
+ var internalDNDType = 'text/x-example'; // set this to something specific to your site
+ function dragEnterHandler(event) {
+ // cancel the event if the drag contains data of our type
+ if (event.dataTransfer.types.contains(internalDNDType)
+ event.preventDefault();
+ }
+ function dragOverHandler(event) {
+ event.dataTransfer.dropEffect = 'move';
+ event.preventDefault();
+ }
+ function dropHandler(event) {
+ // drop the data
+ var li = document.createElement('li');
+ var data = event.dataTransfer.getData(internalDNDType);
+ if (data == 'fruit-apple') {
+ li.textContent = 'Apples';
+ } else if (data == 'fruit-orange') {
+ li.textContent = 'Oranges';
+ } else if (data == 'fruit-pear') {
+ li.textContent = 'Pears';
+ } else {
+ li.textContent = 'Unknown Fruit';
+ }
+ event.target.appendChild(li);
+ }
+</script></pre><hr><p>To remove the original element (the one that was dragged) from
+ the display, the <code title=event-dragend><a href=#event-dragend>dragend</a></code> event
+ can be used.</p><p>For our example here, that means updating the original markup to
+ handle that event:</p><pre><p>What fruits do you like?</p>
+<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)">
+ <em>...as before...</em>
+</ol>
+<script>
+ function dragStartHandler(event) {
+ // <em>...as before...</em>
+ }
+ function dragEndHandler(event) {
+ // remove the dragged element
+ event.target.parentNode.removeChild(event.target);
+ }
+</script></pre><h4 id=the-dragevent-and-datatransfer-interfaces><span class=secno>7.9.2 </span>The <code><a href=#dragevent>DragEvent</a></code> and <code><a href=#datatransfer>DataTransfer</a></code> interfaces</h4><p>The drag-and-drop processing model involves several events. They
all use the <code><a href=#dragevent>DragEvent</a></code> interface.</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>;
Index: introduction.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/introduction.html,v
retrieving revision 1.166
retrieving revision 1.167
diff -u -d -r1.166 -r1.167
--- introduction.html 18 Sep 2009 05:16:54 -0000 1.166
+++ introduction.html 18 Sep 2009 06:57:04 -0000 1.167
@@ -217,7 +217,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="Overview.html#contents">Table of contents</a> –
<a href="infrastructure.html">2 Common infrastructure →</a>
Index: no.html
===================================================================
RCS file: /sources/public/html5/spec-author-view/no.html,v
retrieving revision 1.165
retrieving revision 1.166
diff -u -d -r1.165 -r1.166
--- no.html 18 Sep 2009 05:16:54 -0000 1.165
+++ no.html 18 Sep 2009 06:57:04 -0000 1.166
@@ -218,7 +218,7 @@
<p><a href="http://www.w3.org/"><img alt="W3C" height="48" src="http://www.w3.org/Icons/w3c_home" width="72"></a></p>
<h1>HTML5</h1>
<h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
-<p>This is revision 1.3051.</p>
+<p>This is revision 1.3052.</p>
</div><div>
<a href="obsolete.html">← 11 Obsolete features</a> –
<a href="Overview.html#contents">Table of contents</a> –
Received on Friday, 18 September 2009 06:57:18 UTC