- From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
- Date: Thu, 03 Mar 2011 23:05:08 +0000
- To: public-html-commits@w3.org
Update of /sources/public/html5/spec
In directory hutz:/tmp/cvs-serv1859
Modified Files:
Overview.html
Log Message:
Forgot to update this text when we added dropzone. (whatwg r5927)
Index: Overview.html
===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.4767
retrieving revision 1.4768
diff -u -d -r1.4767 -r1.4768
--- Overview.html 3 Mar 2011 22:55:08 -0000 1.4767
+++ Overview.html 3 Mar 2011 23:05:03 -0000 1.4768
@@ -51517,39 +51517,27 @@
event.preventDefault(); // don't allow selection to be dragged
}
}
-</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>For example:<pre><p>Drop your favorite fruits below:</p>
-<ol class="dropzone"
- ondragenter="dragEnterHandler(event)"
- ondragover="dragOverHandler(event)"
- ondrop="dropHandler(event)">
+</script></pre><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>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 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>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>For example:<pre><p>Drop your favorite fruits below:</p>
+<ol dropzone="move s:text/x-example" ondrop="dropHandler(event)">
+ <-- don't forget to change the "text/x-example" type to something
+ specific to your site -->
</ol>
<script>
var internalDNDType = 'text/x-example'; // set this to something specific to your site
- function 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') {
Received on Thursday, 3 March 2011 23:05:09 UTC