[html5] r5927 - [e] (0) Forgot to update this text when we added dropzone. Fixing http://www.w3. [...]
whatwg at whatwg.org
whatwg at whatwg.org
Thu Mar 3 15:04:58 PST 2011
Author: ianh
Date: 2011-03-03 15:04:57 -0800 (Thu, 03 Mar 2011)
New Revision: 5927
Modified:
complete.html
index
source
Log:
[e] (0) Forgot to update this text when we added dropzone.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=11952
Modified: complete.html
===================================================================
--- complete.html 2011-03-03 22:54:58 UTC (rev 5926)
+++ complete.html 2011-03-03 23:04:57 UTC (rev 5927)
@@ -68114,43 +68114,37 @@
}
</script></pre>
- <hr><!-- v2: once dropzone="" is implemented, add text here to use that
- instead of the events --><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
- 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; otherwise, the
- default behavior (typically to do nothing) is used instead. 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>
+ <hr><p>To accept a drop, the drop target has to have a <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute and listen to the
+ <code title=drop-event>drop</code> event.</p>
+ <p>The value of the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code>
+ attribute specifies what kind of data to accept (e.g. "<code title="">s:text/plain</code>" to accept any text strings, or
+ "<code>f:image/png</code>" to accept a PNG image file) and what kind
+ of feedback to give (e.g. "<code>move</code>" to indicate that the
+ data will be moved).</p>
+
+ <p class=note>Instead of using the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute, a drop target can
+ handle the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event (to
+ report whether or not the drop target is to accept the drop) and the
+ <code title=event-dragover><a href=#event-dragover>dragover</a></code> event (to specify what
+ feedback is to be shown to the user).</p>
+
+ <p>The <code title=event-drop><a href=#event-drop>drop</a></code> event allows the actual
+ drop to be performed. This event 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 favorite fruits below:</p>
-<ol class="dropzone"
- ondragenter="dragEnterHandler(event)"
- ondragover="dragOverHandler(event)"
- ondrop="dropHandler(event)">
+<ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
+ <-- don't forget to change the "text/x-example" type to something
+ specific to your site -->
</ol>
<script>
var internalDNDType = 'text/x-example'; // set this to something specific to your site
- function 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(); // override default drag feedback
- }
function dropHandler(event) {
- // drop the data
var li = document.createElement('li');
var data = event.dataTransfer.getData(internalDNDType);
if (data == 'fruit-apple') {
@@ -68173,7 +68167,6 @@
<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>
Modified: index
===================================================================
--- index 2011-03-03 22:54:58 UTC (rev 5926)
+++ index 2011-03-03 23:04:57 UTC (rev 5927)
@@ -68123,43 +68123,37 @@
}
</script></pre>
- <hr><!-- v2: once dropzone="" is implemented, add text here to use that
- instead of the events --><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
- 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; otherwise, the
- default behavior (typically to do nothing) is used instead. 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>
+ <hr><p>To accept a drop, the drop target has to have a <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute and listen to the
+ <code title=drop-event>drop</code> event.</p>
+ <p>The value of the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code>
+ attribute specifies what kind of data to accept (e.g. "<code title="">s:text/plain</code>" to accept any text strings, or
+ "<code>f:image/png</code>" to accept a PNG image file) and what kind
+ of feedback to give (e.g. "<code>move</code>" to indicate that the
+ data will be moved).</p>
+
+ <p class=note>Instead of using the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute, a drop target can
+ handle the <code title=event-dragenter><a href=#event-dragenter>dragenter</a></code> event (to
+ report whether or not the drop target is to accept the drop) and the
+ <code title=event-dragover><a href=#event-dragover>dragover</a></code> event (to specify what
+ feedback is to be shown to the user).</p>
+
+ <p>The <code title=event-drop><a href=#event-drop>drop</a></code> event allows the actual
+ drop to be performed. This event 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 favorite fruits below:</p>
-<ol class="dropzone"
- ondragenter="dragEnterHandler(event)"
- ondragover="dragOverHandler(event)"
- ondrop="dropHandler(event)">
+<ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
+ <-- don't forget to change the "text/x-example" type to something
+ specific to your site -->
</ol>
<script>
var internalDNDType = 'text/x-example'; // set this to something specific to your site
- function 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(); // override default drag feedback
- }
function dropHandler(event) {
- // drop the data
var li = document.createElement('li');
var data = event.dataTransfer.getData(internalDNDType);
if (data == 'fruit-apple') {
@@ -68182,7 +68176,6 @@
<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>
Modified: source
===================================================================
--- source 2011-03-03 22:54:58 UTC (rev 5926)
+++ source 2011-03-03 23:04:57 UTC (rev 5927)
@@ -77570,47 +77570,40 @@
<hr>
- <!-- v2: once dropzone="" is implemented, add text here to use that
- instead of the events -->
+ <p>To accept a drop, the drop target has to have a <code
+ title="attr-dropzone">dropzone</code> attribute and listen to the
+ <code title="drop-event">drop</code> event.</p>
- <p>To accept a drop, the drop target has to listen to at least three
- events. First, the <code title="event-dragenter">dragenter</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">dragover</code> event, which is used to
- determine what feedback is to be shown to the user. If the event is
- canceled, then the feedback (typically the cursor) is updated based
- on the <code title="dom-DataTransfer-DropEffect">dropEffect</code>
- attribute's value, as set by the event handler; otherwise, the
- default behavior (typically to do nothing) is used instead. Finally,
- the <code title="event-drop">drop</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">dropEffect</code> attribute's
- value can be used by the source (otherwise it's reset).</p>
+ <p>The value of the <code title="attr-dropzone">dropzone</code>
+ attribute specifies what kind of data to accept (e.g. "<code
+ title="">s:text/plain</code>" to accept any text strings, or
+ "<code>f:image/png</code>" to accept a PNG image file) and what kind
+ of feedback to give (e.g. "<code>move</code>" to indicate that the
+ data will be moved).</p>
+ <p class="note">Instead of using the <code
+ title="attr-dropzone">dropzone</code> attribute, a drop target can
+ handle the <code title="event-dragenter">dragenter</code> event (to
+ report whether or not the drop target is to accept the drop) and the
+ <code title="event-dragover">dragover</code> event (to specify what
+ feedback is to be shown to the user).</p>
+
+ <p>The <code title="event-drop">drop</code> event allows the actual
+ drop to be performed. This event needs to be canceled, so that the
+ <code title="dom-DataTransfer-DropEffect">dropEffect</code>
+ attribute's value can be used by the source (otherwise it's
+ reset).</p>
+
<p>For example:</p>
<pre><p>Drop your favorite fruits below:</p>
-<ol class="dropzone"
- ondragenter="dragEnterHandler(event)"
- ondragover="dragOverHandler(event)"
- ondrop="dropHandler(event)">
+<ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
+ <-- don't forget to change the "text/x-example" type to something
+ specific to your site -->
</ol>
<script>
var internalDNDType = 'text/x-example'; // set this to something specific to your site
- function 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(); // override default drag feedback
- }
function dropHandler(event) {
- // drop the data
var li = document.createElement('li');
var data = event.dataTransfer.getData(internalDNDType);
if (data == 'fruit-apple') {
@@ -77635,7 +77628,6 @@
<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>
More information about the Commit-Watchers
mailing list