dataTransfer.dropEffect 属性

2019-10-9 21:28| 作者: admin| 查看: 89| 评论: 0|来自: 蚂蚁部落

此属性用于规定或者返回目标元素期望的拖拽操作的类型,可读写属性。

通常与DataTransfer.effectAllowed 属性配合使用:

(1).effectAllowed属性规定源元素期待的拖拽类型。

(2).dropEffect属性规定目标元素期待的拖拽类型。

关于dropEffect属性可以参阅DataTransfer.effectAllowed 属性一章节。

语法结构:

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

属性值解析如下:

(1).copy:目标元素期待拷贝相关拖拽操作。

(2).move:目标元素期待移动相关拖拽操作。

(3).link:目标元素期待链接相关拖拽操作。

(4).none:不允许进行拖拽操作。

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

(1).在dragover事件处理函数中定义。

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

上面的代码并不能完成拖动操作,下面进行一下分析:

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

也就是说源元素的期待拖拽操作与拷贝或者移动相关。

在dragover事件处理函数中,设置dropEffect属性值为"link"。

也就是说目标元素的期待拖拽操作是与连接相关,并不在effectAllowed许可范围之内。

比如将dropEffect属性值设置为"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="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>

上述代码同样可以实现拖放操作。

可以看到,期望的是实现拷贝操作,但实际进行的是移动操作。

也就是说,具体的操作内容由事件处理函数中的具体代码决定。

只要dropEffect在effectAllowed许可范围之内,即可实现拖拽效果。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部