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 οnlοad="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>