Question

HTML5规范提出了一个dropzone属性，虽然这在任何浏览器中都没有实现（看起来Opera在切换到WebKit之前就已经实现了？）。它的格式是例如

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

这意味着（我认为......）dropzone将接受＆＃34;即 - 如果拖动包含类型为image / png的文件，它将取消dragover和dragenter事件。这看起来很公平，你仍然需要提供一个drop handler。

我的问题是＆＃34; copy＆＃34;的目的是什么？部分 - 规范。很清楚，必须只有一个值。这与dropEffect有什么关系？虽然也笼罩在神秘和不同的浏览器实现中，但dropEffect应该与effectAllowed属性一起使用，它会是这样的：

ondragstart - 将dataTransfer.effectAllowed设置为＆＃34; copyMove＆＃34;
ondragover - 将dataTransfer.dropEffect设置为＆＃34; copy＆＃34;或＆＃34;移动＆＃34;取决于你想做什么。

Chrome会切换光标以指示根据dropEffect进行复制或移动，dropEffect可以在dragover期间动态设置。然而有趣的是，dropEffect可能基于例如不同而有所不同。与鼠标配合使用的组合键。因此，dropzone如何支持这个用例，因为它必须只有一个＆＃34;操作＆＃34; - 这是因为操作与＆＃34; dropEffect＆＃34;不同。？

规范说明了......

dropzone内容属性的值不得超过指定的三个反馈值（复制，移动和链接）中的一个。如果未指定，则隐含复制值。

..这让我觉得它可能仅适用于通用鼠标光标反馈？ Chrome和Mozilla都不允许dropEffect不是effectAllowed值之一。一种理论是，如果你选择实现dragover并提供不同的dropEffect - 这会覆盖操作？但是，假设首先使用dropzone的一个优点是你不必实施dragover / dragenter并取消活动等。

感谢阅读...

Answer 1

建议

<!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>

Answer 2

我知道这个答案有点晚了，但dropzone属性仍然没有被任何主流浏览器实现，所以我的答案现在应该像2年前一样相关......
无论如何，标准的目的是开发人员必须在任何给定时间选择3个选项中的一个。换句话说，您应该能够动态地动态更改给定dropzone属性的值，但是当您更改该值时，请确保选择一个选项。

示例：

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

注意：我意识到我的例子不起作用。我只是在证明自己的观点。：）

HTML5 dropzone属性与dropEffect的关系

2 个答案: