DataTransfer.effectAllowed 屬性

admin 發表於2019-10-09

關於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"都可以允許拖拽。