W3C home > Mailing lists > Public > public-html-commits@w3.org > March 2011

html5/spec Overview.html,1.4767,1.4768

From: Ian Hickson via cvs-syncmail <cvsmail@w3.org>
Date: Thu, 03 Mar 2011 23:05:08 +0000
To: public-html-commits@w3.org
Message-Id: <E1PvHa0-0000UX-7a@lionel-hutz.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
     }
   }
-&lt;/script&gt;</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>&lt;p&gt;Drop your favorite fruits below:&lt;/p&gt;
-&lt;ol class="dropzone"
-    ondragenter="dragEnterHandler(event)"
-    ondragover="dragOverHandler(event)"
-    ondrop="dropHandler(event)"&gt;
+&lt;/script&gt;</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>&lt;p&gt;Drop your favorite fruits below:&lt;/p&gt;
+&lt;ol dropzone="move s:text/x-example" ondrop="dropHandler(event)"&gt;
+ &lt;-- don't forget to change the "text/x-example" type to something
+ specific to your site --&gt;
 &lt;/ol&gt;
 &lt;script&gt;
   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 GMT

This archive was generated by hypermail 2.2.0+W3C-0.50 : Thursday, 3 March 2011 23:05:10 GMT