[html5] r5661 - [giow] (0) dropzone 5/5, part 4/4: finishing touches for dropzone='': add it to [...]
whatwg at whatwg.org
whatwg at whatwg.org
Mon Nov 1 14:42:26 PDT 2010
Author: ianh
Date: 2010-11-01 14:42:19 -0700 (Mon, 01 Nov 2010)
New Revision: 5661
Modified:
complete.html
index
source
Log:
[giow] (0) dropzone 5/5, part 4/4: finishing touches for dropzone='': add it to the indexes and IDL; add an example.
Fixing http://www.w3.org/Bugs/Public/show_bug.cgi?id=10712
Modified: complete.html
===================================================================
--- complete.html 2010-11-01 21:05:21 UTC (rev 5660)
+++ complete.html 2010-11-01 21:42:19 UTC (rev 5661)
@@ -9178,6 +9178,7 @@
attribute DOMString <a href=#dom-accesskey title=dom-accessKey>accessKey</a>;
readonly attribute DOMString <a href=#dom-accesskeylabel title=dom-accessKeyLabel>accessKeyLabel</a>;
attribute boolean <a href=#dom-draggable title=dom-draggable>draggable</a>;
+ [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-dropzone title=dom-dropzone>dropzone</a>;
attribute DOMString <a href=#dom-contenteditable title=dom-contentEditable>contentEditable</a>;
readonly attribute boolean <a href=#dom-iscontenteditable title=dom-isContentEditable>isContentEditable</a>;
attribute <a href=#htmlmenuelement>HTMLMenuElement</a> <a href=#dom-contextmenu title=dom-contextMenu>contextMenu</a>;
@@ -9284,6 +9285,7 @@
<li><code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code></li>
<li><code title=attr-dir><a href=#the-dir-attribute>dir</a></code></li>
<li><code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code></li>
+ <li><code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code></li>
<li><code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code></li>
<li><code title=attr-id><a href=#the-id-attribute>id</a></code></li>
<!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
@@ -65842,7 +65844,8 @@
}
</script></pre>
- <hr><p>To accept a drop, the drop target has to listen to at least three
+ <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
@@ -67825,6 +67828,8 @@
specified, the <code title=attr-dropzone-copy><a href=#attr-dropzone-copy>copy</a></code> value is
implied.</p>
+ <div class=impl>
+
<p>A <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute <dfn id=concept-dropzone-match title=concept-dropzone-match>matches a drag data store</dfn> if
the <a href=#dropzone-processing-steps><code title=attr-dropzone>dropzone</code> processing
steps</a> result in a match.</p>
@@ -67962,15 +67967,33 @@
attribute must <a href=#reflect>reflect</a> the content attribute of the
same name.</p>
- <!-- XXX dropzone add to:
- HTMLElement IDL
- Global Attributes list
- List of focusable elements, with caveat
- DND introduction
- Attribute index
- -->
+ </div>
+ <div class=example>
+ <p>In this example, a <code><a href=#the-div-element>div</a></code> element is made into a drop
+ target for image files using the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute. Images dropped
+ into the target are then displayed.</p>
+
+ <pre><div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
+ <p>Drop an image here to have it displayed.</p>
+</div>
+<script>
+ function receive(event, element) {
+ var data = event.dataTransfer.items;
+ for (var i = 0; i < data.length; i += 1) {
+ if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
+ var img = new Image();
+ img.src = window.createObjectURL(data[i].getAsFile());
+ element.appendChild(img);
+ }
+ }
+ }
+</script></pre>
+
+ </div>
+
+
<!--
<h4>Copy and paste</h4>
@@ -89964,6 +89987,10 @@
<td> <a href=#the-draggable-attribute title=attr-draggable>HTML elements</a>
<td> Whether the element is draggable
<td> "<code title="">true</code>"; "<code title="">false</code>"
+ <tr><th> <code title="">dropzone</code>
+ <td> <a href=#the-dropzone-attribute title=attr-dropzone>HTML elements</a>
+ <td> Accepted item types for drag-and-drop
+ <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a>, <a href=#ascii-case-insensitive>ASCII case-insensitive</a>, consisting of accepted types and drag feedback*
<tr><th> <code title="">enctype</code>
<td> <code title=attr-fs-enctype><a href=#attr-fs-enctype>form</a></code>
<td> Form data set encoding type to use for <a href=#form-submission>form submission</a>
Modified: index
===================================================================
--- index 2010-11-01 21:05:21 UTC (rev 5660)
+++ index 2010-11-01 21:42:19 UTC (rev 5661)
@@ -9155,6 +9155,7 @@
attribute DOMString <a href=#dom-accesskey title=dom-accessKey>accessKey</a>;
readonly attribute DOMString <a href=#dom-accesskeylabel title=dom-accessKeyLabel>accessKeyLabel</a>;
attribute boolean <a href=#dom-draggable title=dom-draggable>draggable</a>;
+ [PutForwards=<a href=#dom-domsettabletokenlist-value title=dom-DOMSettableTokenList-value>value</a>] attribute <a href=#domsettabletokenlist>DOMSettableTokenList</a> <a href=#dom-dropzone title=dom-dropzone>dropzone</a>;
attribute DOMString <a href=#dom-contenteditable title=dom-contentEditable>contentEditable</a>;
readonly attribute boolean <a href=#dom-iscontenteditable title=dom-isContentEditable>isContentEditable</a>;
attribute <a href=#htmlmenuelement>HTMLMenuElement</a> <a href=#dom-contextmenu title=dom-contextMenu>contextMenu</a>;
@@ -9261,6 +9262,7 @@
<li><code title=attr-contextmenu><a href=#attr-contextmenu>contextmenu</a></code></li>
<li><code title=attr-dir><a href=#the-dir-attribute>dir</a></code></li>
<li><code title=attr-draggable><a href=#the-draggable-attribute>draggable</a></code></li>
+ <li><code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code></li>
<li><code title=attr-hidden><a href=#the-hidden-attribute>hidden</a></code></li>
<li><code title=attr-id><a href=#the-id-attribute>id</a></code></li>
<!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
@@ -65848,7 +65850,8 @@
}
</script></pre>
- <hr><p>To accept a drop, the drop target has to listen to at least three
+ <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
@@ -67831,6 +67834,8 @@
specified, the <code title=attr-dropzone-copy><a href=#attr-dropzone-copy>copy</a></code> value is
implied.</p>
+ <div class=impl>
+
<p>A <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute <dfn id=concept-dropzone-match title=concept-dropzone-match>matches a drag data store</dfn> if
the <a href=#dropzone-processing-steps><code title=attr-dropzone>dropzone</code> processing
steps</a> result in a match.</p>
@@ -67968,15 +67973,33 @@
attribute must <a href=#reflect>reflect</a> the content attribute of the
same name.</p>
- <!-- XXX dropzone add to:
- HTMLElement IDL
- Global Attributes list
- List of focusable elements, with caveat
- DND introduction
- Attribute index
- -->
+ </div>
+ <div class=example>
+ <p>In this example, a <code><a href=#the-div-element>div</a></code> element is made into a drop
+ target for image files using the <code title=attr-dropzone><a href=#the-dropzone-attribute>dropzone</a></code> attribute. Images dropped
+ into the target are then displayed.</p>
+
+ <pre><div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
+ <p>Drop an image here to have it displayed.</p>
+</div>
+<script>
+ function receive(event, element) {
+ var data = event.dataTransfer.items;
+ for (var i = 0; i < data.length; i += 1) {
+ if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
+ var img = new Image();
+ img.src = window.createObjectURL(data[i].getAsFile());
+ element.appendChild(img);
+ }
+ }
+ }
+</script></pre>
+
+ </div>
+
+
<!--
<h4>Copy and paste</h4>
@@ -85878,6 +85901,10 @@
<td> <a href=#the-draggable-attribute title=attr-draggable>HTML elements</a>
<td> Whether the element is draggable
<td> "<code title="">true</code>"; "<code title="">false</code>"
+ <tr><th> <code title="">dropzone</code>
+ <td> <a href=#the-dropzone-attribute title=attr-dropzone>HTML elements</a>
+ <td> Accepted item types for drag-and-drop
+ <td> <a href=#unordered-set-of-unique-space-separated-tokens>Unordered set of unique space-separated tokens</a>, <a href=#ascii-case-insensitive>ASCII case-insensitive</a>, consisting of accepted types and drag feedback*
<tr><th> <code title="">enctype</code>
<td> <code title=attr-fs-enctype><a href=#attr-fs-enctype>form</a></code>
<td> Form data set encoding type to use for <a href=#form-submission>form submission</a>
Modified: source
===================================================================
--- source 2010-11-01 21:05:21 UTC (rev 5660)
+++ source 2010-11-01 21:42:19 UTC (rev 5661)
@@ -9262,6 +9262,7 @@
attribute DOMString <span title="dom-accessKey">accessKey</span>;
readonly attribute DOMString <span title="dom-accessKeyLabel">accessKeyLabel</span>;
attribute boolean <span title="dom-draggable">draggable</span>;
+ [PutForwards=<span title="dom-DOMSettableTokenList-value">value</span>] attribute <span>DOMSettableTokenList</span> <span title="dom-dropzone">dropzone</span>;
attribute DOMString <span title="dom-contentEditable">contentEditable</span>;
readonly attribute boolean <span title="dom-isContentEditable">isContentEditable</span>;
attribute <span>HTMLMenuElement</span> <span title="dom-contextMenu">contextMenu</span>;
@@ -9369,6 +9370,7 @@
<li><code title="attr-contextmenu">contextmenu</code></li>
<li><code title="attr-dir">dir</code></li>
<li><code title="attr-draggable">draggable</code></li>
+ <li><code title="attr-dropzone">dropzone</code></li>
<li><code title="attr-hidden">hidden</code></li>
<li><code title="attr-id">id</code></li>
<!--END w3c-html--><!--MD--><!--WARNING: ALSO DUPLICATED IN MICRODATA SECTION -->
@@ -75005,6 +75007,9 @@
<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">dragenter</code>
event, which is used to determine whether or not the drop target is
@@ -77418,6 +77423,8 @@
specified, the <code title="attr-dropzone-copy">copy</code> value is
implied.</p>
+ <div class="impl">
+
<p>A <code title="attr-dropzone">dropzone</code> attribute <dfn
title="concept-dropzone-match">matches a drag data store</dfn> if
the <span><code title="attr-dropzone">dropzone</code> processing
@@ -77583,15 +77590,34 @@
attribute must <span>reflect</span> the content attribute of the
same name.</p>
- <!-- XXX dropzone add to:
- HTMLElement IDL
- Global Attributes list
- List of focusable elements, with caveat
- DND introduction
- Attribute index
- -->
+ </div>
+ <div class="example">
+ <p>In this example, a <code>div</code> element is made into a drop
+ target for image files using the <code
+ title="attr-dropzone">dropzone</code> attribute. Images dropped
+ into the target are then displayed.</p>
+
+ <pre><div dropzone="copy f:image/png f:image/gif f:image/jpeg" ondrop="receive(event, this)">
+ <p>Drop an image here to have it displayed.</p>
+</div>
+<script>
+ function receive(event, element) {
+ var data = event.dataTransfer.items;
+ for (var i = 0; i < data.length; i += 1) {
+ if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
+ var img = new Image();
+ img.src = window.createObjectURL(data[i].getAsFile());
+ element.appendChild(img);
+ }
+ }
+ }
+</script></pre>
+
+ </div>
+
+
<!--
<h4>Copy and paste</h4>
@@ -103350,6 +103376,11 @@
<td> Whether the element is draggable
<td> "<code title="">true</code>"; "<code title="">false</code>"
<tr>
+ <th> <code title="">dropzone</code>
+ <td> <span title="attr-dropzone">HTML elements</span>
+ <td> Accepted item types for drag-and-drop
+ <td> <span>Unordered set of unique space-separated tokens</span>, <span>ASCII case-insensitive</span>, consisting of accepted types and drag feedback*
+ <tr>
<th> <code title="">enctype</code>
<td> <code title="attr-fs-enctype">form</code>
<td> Form data set encoding type to use for <span>form submission</span>
More information about the Commit-Watchers
mailing list