From 3044a7e8517a4488cea811789d19974a8d5a56ae Mon Sep 17 00:00:00 2001 From: Victor Costan Date: Mon, 6 Mar 2017 12:10:31 -0800 Subject: [PATCH] Remove the dropzone global attribute dropzone failed to get traction among browser implementers. Having it in the specification is confusing to Web developers who may attempt to use it, only to discover that it is not supported. WebKit and Blink implemented a prefixed version, webkitdropzone. The prefixed version is going away from Blink [1]. WebKit has no objections to the attribute getting removed from the spec [2]. Fixes #2331. Tests: * https://github.com/w3c/web-platform-tests/pull/5052 * https://github.com/w3c/web-platform-tests/issues/5053 [1]: https://www.chromestatus.com/feature/5718005866561536 [2]: https://github.com/whatwg/html/issues/2331#issuecomment-280746724 --- source | 372 +++++++-------------------------------------------------- 1 file changed, 42 insertions(+), 330 deletions(-) diff --git a/source b/source index 501a770186d..6ca8a4e771f 100644 --- a/source +++ b/source @@ -9210,7 +9210,6 @@ interface HTMLElement : Element { [CEReactions] attribute DOMString accessKey; readonly attribute DOMString accessKeyLabel; [CEReactions] attribute boolean draggable; - [SameObject, PutForwards=value] readonly attribute DOMTokenList dropzone; [CEReactions] attribute HTMLMenuElement? contextMenu; [CEReactions] attribute boolean spellcheck; void forceSpellCheck(); @@ -10419,7 +10418,6 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
  • contextmenu
  • dir
  • draggable
    • -
  • dropzone
  • hidden
  • is
  • itemid
    • @@ -74240,9 +74238,9 @@ body { display:none } -

    To make an element draggable is simple: give the element a draggable attribute, and set an event listener for dragstart that stores the data being dragged.

    +

    To make an element draggable, give the element a draggable + attribute, and set an event listener for dragstart that + stores the data being dragged.

    The event handler typically needs to check that it's not a text selection that is being dragged, and then needs to store data into the DataTransfer object and set the @@ -74271,33 +74269,49 @@ body { display:none }

    -

    To accept a drop, the drop target has to have a dropzone - attribute and listen to the drop event.

    +

    To accept a drop, the drop target has to listen to the following events:

    -

    The value of the dropzone attribute specifies what kind of - data to accept (e.g. "string:text/plain" to accept any text strings, or - "file:image/png" to accept a PNG image file) and what kind of feedback to - give (e.g. "move" to indicate that the data will be moved).

    +
      + +
    1. The dragenter event handler reports + whether or not the drop target is potentially willing to accept the drop, by canceling the + event.
      2. + +
    2. The dragover event handler specifies what feedback + will be shown to the user, by setting the dropEffect attribute of the + DataTransfer associated with the event. This event also needs to be canceled.
      3. -

      Instead of using the dropzone attribute, a drop - target can handle the dragenter event (to report whether or - not the drop target is to accept the drop) and the dragover - event (to specify what feedback is to be shown to the user).

      +
    3. The drop event handler has a final chance to accept or + reject the drop. If the drop is accepted, the event handler must perform the drop operation on + the target. This event needs to be canceled, so that the dropEffect attribute's value can be used by the + source. Otherwise, the drop operation is rejected.
      4. -

      The drop event allows the actual drop to be performed. This - event needs to be canceled, so that the dropEffect attribute's value can be used by the source - (otherwise it's reset).

      +

    For example:

    <p>Drop your favorite fruits below:</p>
-<ol dropzone="move string:text/x-example" ondrop="dropHandler(event)">
- <!-- don't forget to change the "text/x-example" type to something
- specific to your site -->
+<ol ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"
+    ondrop="dropHandler(event)">
 </ol>
 <script>
   var internalDNDType = 'text/x-example'; // set this to something specific to your site
+  function dragEnterHandler(event) {
+    var items = event.dataTransfer.items;
+    for (var i = 0; i < items.length; ++i) {
+      var item = items[i];
+      if (item.kind == 'string' && item.type == internalDNDType) {
+        event.preventDefault();
+        return;
+      }
+    }
+  }
+  function dragOverHandler(event) {
+    event.dataTransfer.dropEffect = 'move';
+    event.preventDefault();
+  }
   function dropHandler(event) {
     var li = document.createElement('li');
     var data = event.dataTransfer.getData(internalDNDType);
@@ -74397,10 +74411,6 @@ body { display:none }
       type">MIME types; other values can be used as well. In all cases, however, the values
       are all converted to ASCII lowercase by the API.
    
 
-      
    Strings that contain ASCII whitespace cannot be used with the
-      dropzone attribute, so authors are encouraged to use only
-      MIME types or custom strings (without whitespace).
    
-
       
    There is a limit of one Plain Unicode string item per item type string.
     
@@ -75853,40 +75863,10 @@ dictionary DragEventInit : MouseEventInit {
          
    Set the current target element to the immediate user
          selection anyway.
    
 
-
-         
    If the immediate user selection is an element with a dropzone attribute that matches the drag data store
    
-
-         
    Set the current target element to the immediate user
-         selection anyway.
    
-
-
-         
    If the immediate user selection is an element that itself has an ancestor
-         element with a dropzone attribute that matches the drag data store
    
-
-         
    
-
-          
    Let new target be the nearest (deepest) such ancestor element.
    
-
-          
    If the immediate user selection is new target, then leave the
-          current target element unchanged.
    
-
-          
    Otherwise, fire a DND event named dragenter at new target, with the current
-          current target element as the specific related target. Then, set
-          the current target element to new target, regardless of whether
-          that event was canceled or not.
    
-
-         
    
-
-
          
    If the immediate user selection is the body element
    
 
          
    Leave the current target element unchanged.
    
 
-
          
    Otherwise
    
 
          
    
@@ -75941,26 +75921,6 @@ dictionary DragEventInit : MouseEventInit {
        conventions.
    
 
 
-       
    If the current target element is an element with a dropzone attribute that matches the drag data store and specifies an operation
    
-
-       
    Set the current drag operation to the operation specified by the dropzone attribute of the current target
-       element.
    
-
-
-       
    If the current target element is an element with a dropzone attribute that matches the drag data store and does not
-       specify an operation
    
-
-       
    Set the current drag operation to "copy".
    
-
-
        
    Otherwise
    
 
        
    Reset the current drag operation to "DragEventInit : MouseEventInit {
   non-visual interactions. 
    
+  shouldn't the element generally be distinguishable anyway for it to be useful to drag? -->
    
 
   
    
 
@@ -76398,253 +76357,6 @@ dictionary DragEventInit : MouseEventInit {
   
 
 
-  
    The dropzone attribute
    
-
-  
    All HTML elements may have the dropzone content
-  attribute set. When specified, its value must be an unordered set of unique space-separated
-  tokens that are ASCII case-insensitive. The allowed values are the
-  following:
    
-
-  
    
-
-   
    copy
    
-
-   
    Indicates that dropping an accepted item on the element will result in a copy of the
-   dragged data.
    
-
-
-   
    move
    
-
-   
    Indicates that dropping an accepted item on the element will result in the dragged data
-   being moved to the new location.
    
-
-
-   
    link
    
-
-   
    Indicates that dropping an accepted item on the element will result in a link to the
-   original data.
    
-
-
-   
    Any keyword with eight characters or more, beginning with an ASCII
-   case-insensitive match for the string "string:"
    
-
-   
    Indicates that items with the drag data item kind Plain Unicode string
-   and the drag data item type string set to a value that matches the remainder of the
-   keyword are accepted.
    
-
-
-
-   
    Any keyword with six characters or more, beginning with an ASCII
-   case-insensitive match for the string "file:"
    
-
-   
    Indicates that items with the drag data item kind File and the
-   drag data item type string set to a value that matches the remainder of the keyword are
-   accepted.
    
-
-
-
-  
    
-
-  
    The dropzone content attribute's values must not have more
-  than one of the three feedback values (copy, move, and link)
-  specified. If none are specified, the copy value is
-  implied.
    
-
-  
    An element with a dropzone attribute should also have a
-  title attribute that names the element for the purpose of
-  non-visual interactions. 
    
-
-  
    
-
-  
    A dropzone attribute matches a drag data store if the dropzone processing steps result in a match.
    
-
-  
    A dropzone attribute specifies an operation if the dropzone processing steps result in a specified operation. The
-  specified operation is as given by those steps.
    
-
-  
    The dropzone processing steps are as follows.
-  They either result in a match or not, and separate from this result either in a specified
-  operation or not, as defined below.
    
-
-  
      
-
-   
    1. Let value be the value of the dropzone attribute.
      2. 
-
-   
    2. Let keywords be the result of splitting value on ASCII whitespace.
      3. 
-
-   
    3. Let matched be false.
      4. 
-
-   
    4. Let operation be unspecified.
      5. 
-
-   
    5. 
-
-    
      For each value in keywords, if any, in the order that they were found in
-    value, run the following steps.
      
-
-    
        
-
-     
      1. Let keyword be the keyword.
        2. 
-
-     
      2. 
-
-      
        If keyword is one of "copy",
-      "move", or "link", then: run the following substeps:
        
-
-      
          
-
-       
        1. If operation is still unspecified, then let operation be the string given by keyword.
          2. 
-
-       
        2. Skip to the step labeled end of keyword below.
          3. 
-
-      
        
-
-     
        3. 
-
-     
      3. If keyword does not contain a U+003A COLON character (:), or if the
-     first such character in keyword is either the first character or the last
-     character in the string, then skip to the step labeled end of keyword below.
        4. 
-
-     
      4. Let kind code be the substring of keyword from
-     the first character in the string to the last character in the string that is before the first
-     U+003A COLON character (:) in the string, converted to ASCII lowercase.
        
-
-     
      5. 
-
-      
        Jump to the appropriate step from the list below, based on the value of kind
-      code:
        
-
-      
        
-
-       
        If kind code is the string "string"
        
-       
        
-
-        
        Let kind be Plain Unicode string.
        
-
-       
        
-
-
-
-       
        If kind code is the string "file"
        
-       
        
-
-        
        Let kind be File.
        
-
-       
        
-
-
-
-       
        Otherwise
        
-       
        
-
-        
        Skip to the step labeled end of keyword below.
        
-
-       
        
-
-      
        
-
-     
        6. 
-
-     
      6. Let type be the substring of keyword from the
-     first character after the first U+003A COLON character (:) in the string, to the last character
-     in the string, converted to ASCII lowercase.
        7. 
-
-     
      7. If there exist any items in the drag data store item list whose drag data item kind is  the
-     kind given in kind and
-     whose drag data item type string is type, then let matched be true.
        8. 
-
-     
      8. End of keyword: Go on to the next keyword, if any, or the next step in the
-     overall algorithm, if there are no more.
        9. 
-
-    
      
-
-   
      6. 
-
-   
    6. 
-
-    
      The algorithm results in a match if matched is true, and does not
-    otherwise.
      
-
-    
      The algorithm results in a specified operation if operation is not
-    unspecified. The specified operation, if one is specified, is the one given by operation.
      
-
-   
      7. 
-
-  
    
-
-  
    The dropzone IDL attribute must
-  reflect the content attribute of the same name.
    
-
-  
    The supported tokens for
-  dropzone are the allowed values defined for the
-  dropzone attribute that are supported by the user agent.
    
-
-  
    
-
-  
    
-
-   
    In this example, a div element is made into a drop target for image files using
-   the dropzone attribute. Images dropped into the target are
-   then displayed.
    
-
-   
    <div dropzone="copy file:image/png file:image/gif file: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>
    
-
-  
    
-
-