HTML5 dropzone屬性與dropEffect的關係

HTML5規範提出了一個dropzone屬性，儘管尚未在任何瀏覽器中實現（儘管Opera在切換到WebKit之前似乎沒有這樣做）。它的格式是HTML5 dropzone屬性與dropEffect的關係

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

這意味着（我認爲...）的懸浮窗會「接受」，那就是 - 它會取消的dragover和的dragenter事件 - 如果拖動包含類型圖像/ PNG的文件。這看起來很公平，你仍然需要提供一個drop handler。

我的問題是「複製」部分 - 規範的目的是什麼。很清楚，只能有一個價值。這與dropEffect有什麼關係？雖然在神祕和不同的瀏覽器實現也籠罩中，dropEffect將應該與effectAllowed屬性結合使用，它會去是這樣的：

ondragstart - 設置dataTransfer.effectAllowed爲「copyMove」
ondragover - 根據您想要執行的操作將dataTransfer.dropEffect設置爲「複製」或「移動」。

Chrome將切換光標以指示覆制或移動將根據可在dragover期間動態設置的dropEffect進行。不過有趣的部分是，dropEffect可能根據例如與鼠標結合使用的組合鍵。因此，dropzone如何支持這個用例，因爲它只能有一個「操作」 - 這是因爲操作與「dropEffect」不同嗎？

的規範說這個......

懸浮窗的內容屬性的值必須沒有指定的三個反饋值（複製，移動和鏈接）的不止一個。如果沒有指定，則暗示複製值。

..這讓我覺得它可能只是一般的鼠標光標反饋？ Chrome和Mozilla都不允許拖放dropEffect不是effectAllowed值之一。一種理論是，如果您選擇實施dragover並提供不同的dropEffect - 這將覆蓋操作？但大概是擺在首位使用懸浮窗的優點之一是，這樣你就不必實現的dragover /的dragenter和取消事件等

感謝閱讀...

來源

2014-08-28 Woody

建議

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

來源

2015-05-31 19:29:17

我知道這個答案是有點晚，但dropzone屬性還沒有得到任何主流瀏覽器實現的，所以現在我的答案應該是相關的，因爲它本來是2年前...
不管怎樣，該標準的意圖是開發者必須選擇其中的一個選項任何時間。換句話說，您應該可以動態地動態更改給定dropzone屬性的值，但是當您更改該值時，請務必選擇恰好一個選項。

例子：

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

注意：我知道，我的例子是行不通的。我只是在展示我的觀點。 :)

來源

2016-02-10 23:10:14 bobsbeenjamin

HTML5 dropzone屬性與dropEffect的關係

回答

相關問題