DataTransfer.effectAllowed 属性

2019-10-9 16:05| 作者: admin| 查看: 91| 评论: 0|来自: 蚂蚁部落

关于DataTransfer对象总体介绍参阅DataTransfer 对象一章节。

上文提到,此对象的主要功能是用于在源元素与目标元素之间传递数据。

当然也具有其他功能,比如还可能规定或者返回源元素与目标元素所被允许的拖放效果。

DataTransfer.effectAllowed用于规定源元素所允许的拖放效果。

通常会与DataTransfer.dropEffect 属性配合使用,后面会结合实例进行说明。

语法结构:

[JavaScript] 纯文本查看 复制代码
dataTransfer.effectAllowed=effectString

属性值解析如下:

effectString属性值可以使如下几个值:

(1).uninitialized:默认值,表示为初始化,效果与 all 同。

(2).none:源元素不允许被拖放,任何拖放操作都无法完成。

(3).copy:期望源元素进行拷贝操作。

(4).copyLink:期望源元素进行拷贝或者链接相关操作。

(5).copyMove:期望源元素进行拷贝或者移动操作。

(6).link:期望源元素进行链接相关操作。

(7).linkMove:期望源元素进行链接或者移动相关操作。

(8).move:期待源元素进行移动操作。

(9).all:允许源元素进行任何拖拽操作。

此属性主要特点简单总结如下:

(1).在 dragstart 事件处理函数中设置,其他事件处理函数中设置无效。

(2).与dropEffect 属性配合使用,具有相互限定的功能。

(3).实际操作与期望的操作并不一定相同。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
p{
  width:100px;
  height:50px;
  background-color:red;
}
#box {
  width:300px; 
  height:100px;
  background-color:#ccc;
}
</style>
<script>
window.onload = (ev) => {
  let odiv=document.getElementById("box");
  let op=document.getElementById("p");
 
  op.ondragstart = (ev) => {
    ev.dataTransfer.setData("Text",ev.target.id);
    ev.dataTransfer.effectAllowed="copy";
  }
 
  odiv.ondragover = (ev) => {
    ev.preventDefault();
    ev.dataTransfer.dropEffect="link";
  }
 
  odiv.ondrop = (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
  
}
</script>
</head>
<body>
<p draggable="true" id="p"></p>
<div id="box"></div>
</body>
</html>

上述代码无法完成拖动效果,代码分析如下:

[JavaScript] 纯文本查看 复制代码
op.ondragstart = (ev) => {
  ev.dataTransfer.setData("Text",ev.target.id);
  ev.dataTransfer.effectAllowed="copy";
}

dragstart事件处理函数中设置effectAllowed属性值为"copy"。

也就是此源元素期待进行复制拷贝操作。

[JavaScript] 纯文本查看 复制代码
odiv.ondragover = (ev) => {
  ev.preventDefault();
  ev.dataTransfer.dropEffect="link";
}

dropEffect属性规定目标元素允许的拖拽效果是"link"。

此属性值必须在effectAllowed属性值允许的范围内,才能完成拖放操作。

dropEffect属性定义在dragover事件处理函数中。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
p{
  width:100px;
  height:50px;
  background-color:red;
}
#box {
  width:300px; 
  height:100px;
  background-color:#ccc;
}
</style>
<script>
window.onload = (ev) => {
  let odiv=document.getElementById("box");
  let op=document.getElementById("p");
 
  op.ondragstart = (ev) => {
    ev.dataTransfer.setData("Text",ev.target.id);
    ev.dataTransfer.effectAllowed="move";
  }

  odiv.ondragover = (ev) => {
    ev.preventDefault();
    ev.dataTransfer.dropEffect="move";
  }
 
  odiv.ondrop = (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
  
}
</script>
</head>
<body>
<p draggable="true" id="p"></p>
<div id="box"></div>
</body>
</html>

上述代码可以实现拖拽功能,effectAllowed 与 dropEffect属性值相同。

在前文已经讲到过,属性值规定的是"期望"的拖拽操作,即便与期望的不相同也是可以完成拖拽的。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
p{
  width:100px;
  height:50px;
  background-color:red;
}
#box {
  width:300px; 
  height:100px;
  background-color:#ccc;
}
</style>
<script>
window.onload = (ev) => {
  let odiv=document.getElementById("box");
  let op=document.getElementById("p");
 
  op.ondragstart = (ev) => {
    ev.dataTransfer.setData("Text",ev.target.id);
    ev.dataTransfer.effectAllowed="copy";
  }

  odiv.ondragover = (ev) => {
    ev.preventDefault();
    ev.dataTransfer.dropEffect="copy";
  }
 
  odiv.ondrop = (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
  
}
</script>
</head>
<body>
<p draggable="true" id="p"></p>
<div id="box"></div>
</body>
</html>

上述代码中,期望进行拷贝操作,但是很明显进行的是move移动操作,依然可以完成。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
p{
  width:100px;
  height:50px;
  background-color:red;
}
#box {
  width:300px; 
  height:100px;
  background-color:#ccc;
}
</style>
<script>
window.onload = (ev) => {
  let odiv=document.getElementById("box");
  let op=document.getElementById("p");
 
  op.ondragstart = (ev) => {
    ev.dataTransfer.setData("Text",ev.target.id);
    ev.dataTransfer.effectAllowed="linkMove";
  }

  odiv.ondragover = (ev) => {
    ev.preventDefault();
    ev.dataTransfer.dropEffect="move";
  }
 
  odiv.ondrop = (ev) => {
    ev.preventDefault();
    ev.stopPropagation();
    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
  }
  
}
</script>
</head>
<body>
<p draggable="true" id="p"></p>
<div id="box"></div>
</body>
</html>

effectAllowed属性值规定为"linkMove",那么dropEffect属性值是"link"或者"move"都可以允许拖拽。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部