HTML5 dropzone attribute relation to dropEffect

0
votes

The HTML5 spec proposes a dropzone attribute although this has not been implemented as yet in any browsers (it seems like Opera did before they switched to WebKit ?). It's format is e.g.

<div dropzone="copy f:image/png">

This means ( I think... ) that the dropzone will "accept", that is - it will cancel the dragover and dragenter events - if the drag contains a file of type image/png. This seems fair enough, you still need to provide a drop handler.

My question is what is the purpose of the "copy" part - the spec. is clear that there must be only one value. How does this relate to dropEffect ? Although also shrouded in mystery and differing browser implementations, the dropEffect is supposed to be used in conjunction with the effectAllowed property, it would go something like this :

  1. ondragstart - set the dataTransfer.effectAllowed to "copyMove"
  2. ondragover - set the dataTransfer.dropEffect to "copy" or "move" depending on what you want to do.

Chrome will switch the cursor to indicate a copy or a move will take place based on the dropEffect which can be dynamically set during dragover. The interesting part though is that the dropEffect might be different based on e.g. a key combination used in conjunction with the mouse. How can a dropzone therefore support this use case given that it must only have one "operation" - is this because operation is not the same thing as a "dropEffect" ?

The spec says this ...

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.

..which makes me think it is maybe just for generic mouse cursor feedback ? Chrome and Mozilla both do not allow a drop where dropEffect is not one of the effectAllowed values. One theory is that if you choose to implement dragover and provide a different dropEffect - this would override the operation ? But presumably one of the advantages of using dropzone in the first place is so that you don't have to implement dragover/dragenter and cancel the event etc.

thanks for reading...

2
drag-and-drop

2 Answers

0
votes

Suggestion

<!DOCTYPE html> 
<html lang="pt-br"> 
<head> 
  <meta charset="utf-8"> 
  <title>lang</title> 
  <style> 
  #div1 { 
    width: 150px; 
    height: 150px; 
    padding: 10px; 
    border: 1px solid #aaaaaa; 
  } 
  </style> 
  <script> 
  function hasDropzone(ev,data,typezone) {
    if(typezone == null || typezone == "" || typezone  == "move") {
      ev.target.appendChild(document.getElementById(data));
    }
    else if (typezone == "copy") {
      var parent = document.getElementById(data).parentNode;
      var index = 0;
      for(var i = 0; i < parent.childNodes.length; i++) {
        if(parent.childNodes[i].nodeType == "1" && parent.childNodes[i].getAttribute("id") == data) {
          index = i;
        }
      }
      var cln = document.getElementById(data).cloneNode(true); 
      ev.target.appendChild(document.getElementById(data));
      parent.insertBefore(cln, parent.childNodes[index]);

    }
    else if (typezone == "link") {
      var _a = document.createElement("a"); 
      var href = document.createAttribute('href'); 
      _a.setAttribute("href","#"+data); 
      _a.innerText ="Link"; 
      ev.target.appendChild(_a); 
      ev.preventDefault();
    }
  }
  function allowDrop(ev) { 
    ev.preventDefault(); 
  } 
  function drag(ev) { 
    ev.dataTransfer.setData("Image", ev.target.id); 
  } 
  function drop(ev,elem) { 
    var data = ev.dataTransfer.getData("Image"); 
    var typezone = elem.getAttribute("dropzone");
    hasDropzone(ev,data,typezone);
 } 
  </script> 
</head> 
<body> 
  <div id="div1" dropzone="copy"  ondrop="drop(event,this)" ondragover="allowDrop(event)"></div> 
  <br> 
  <img id="drag1" ondragstart="drag(event)" src="images.jpg" alt="dados" width="150" heigth="112"> 
  <hr> 
  <p>http://stackoverflow.com/questions/5913927/get-child-node-index</p> 
</body> 
</html>
0
votes

I know that this answer is a bit late, but the dropzone attribute has still not been implemented by any major browser, so my answer should be as relevant now as it would have been 2 years ago...
Anyhow, the intention of the standard is that a developer must choose one of the 3 options at any given time. In other words, you should be able to dynamically change the value of a given dropzone attribute on the fly, but when you change the value, make sure to pick exactly one option.

Example:

<div id="dropBox1" dropzone="copy">
<script>
  dropBox1 = document.getElementById("dropBox1");
  dropBox1.setAttribute("dropzone", "move");
</script>

Note: I realize that my example doesn't work. I'm just demonstrating my point. :)