- From: poot <cvsmail@w3.org>
- Date: Thu, 03 Mar 2011 18:08:15 -0500
- To: public-html-diffs@w3.org
hixie: Forgot to update this text when we added dropzone. (whatwg r5927) http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.4767&r2=1.4768&f=h http://html5.org/tools/web-apps-tracker?from=5926&to=5927 =================================================================== 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:08:17 UTC