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

相關文章