說說 HTML 中的dropEffect 和 effectAllowed
阿新 • • 發佈：2019-01-03
1.dropEffect 表示拖放操作的視覺效果
2.effectAllowed 用來指定當元素被拖放式所允許的視覺效果
兩者的區別：從概念中理解，effectAllowed 比 dropEffect 多了 “允許” 這兩個關鍵字，由此我們可以得知， efectAllowed 是用來限制dropEffect ，是不是有種類似 父親和兒子的的關係。
根據兩者的概念，我們也就可以輕易理解兩者的使用規則：
（1）如果effectAllowed屬性是定為none,則不允許拖放元素。
（2）如果dropEffect 屬性設定為none,則不允許被拖放到目標元素 中。
（3）如果effectAllowed屬性設定為all 或不設定，則dropEffect屬性允許被設定為任何值。並且按指定的效果顯示。
（4）如果effectAllowed屬性設定為具體的效果（部位none、all），dropEffect屬性也設定了具體視覺效果，則兩個具體效果之必須完全相等，否則不允許將被拖放元素拖放到
目標元素中
一下是示例程式碼：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function init() { var source = document.getElementById("dragme"); var dest = document.getElementById("text"); source.addEventListener("dragstart", function (e) { var dt = e.dataTransfer; dt.effectAllowed = 'copy'; dt.setData("text/plain", "你好"); }, false); dest.addEventListener("dragend", function (e) { e.preventDefault(); }, false); dest.addEventListener("drop", function (e) { var dt = e.dataTransfer; var text = dt.getData("text/plain"); dt.dropEffect = 'copy'; dest.textContent += text; e.preventDefault(); e.stopPropagation; }, false); } document.ondragover = function (e) { e.preventDefault(); }; document.ondrop = function (e) { e.preventDefault(); }; </script> </head> <body onload="init()"> <div id="dragme" draggable="true" style ="width:200px;border:1px solid;border-color:gray">請拖放</div> <div id="text" style="width:200px;height:200px;border:1px solid;border-color:gray"></div> </body> </html>