DataTransfer.items 屬性

admin發表於2019-10-10

此屬性返回拖拽操作中通過DataTransfer物件傳遞的資料，返回一個DataTransferItemList集合物件。

DataTransferItemList集合包含一個或者多個表示資料的DataTransferItem物件。

相關閱讀：

（1）.DataTransferItemList 集合一章節。

（2）.DataTransferItem 物件一章節。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
let DataTransferItemList = dataTransfer.items

下面通過程式碼例項對此屬性進行一下詳細分析。

DataTransfer.files可以返回從作業系統向瀏覽器拖拽的檔案，但是對於其他內容則無能為力。

DataTransfer.items則具有獲取其他型別內容的能力。

下面首先明確一下，屬性返回的是通過DataTransfer物件傳遞的資料。

首先看如下程式碼例項：

[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);
  }
  
  odiv.ondragover = (ev) => {
    ev.preventDefault();
  }
  
  odiv.ondrop = (ev) => {
    let itemList = ev.dataTransfer.items;
    itemList[0].getAsString(function(str){
      console.log(str);    
    });

    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>

上面程式碼可以將頂部的p元素拖動到底部矩形中去。

谷歌瀏覽器控制檯列印效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201910/10/122231mqr8h5zqkrq445ik.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

列印結果為"p"，是通過setData()方法傳遞的資料。

千萬不要認為我們拖動的是P元素，此屬性就是獲取的P元素。

拖拽文字或從作業系統向瀏覽器拖拽檔案的時候，無需我們呼叫setData()，系統會自動完成。

[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">
#box {
  width:300px; 
  height:100px;
  background-color:#ccc;
}
.over {
  border: 1px dashed #000;
  transform: scale(0.8, 0.8);
}
</style>
<script>
window.onload = () =>{
  let odiv=document.getElementById("box");
 
  odiv.ondragenter = (ev) => {
    ev.target.classList.add('over');
  }
  odiv.ondragover = (ev) => {
    ev.preventDefault();
  }
  odiv.ondragleave = (ev) => {
    ev.target.classList.remove('over');
  }
  odiv.ondrop = (ev) => {
    console.log(ev.dataTransfer.types);
    console.log(ev.dataTransfer.items);
    ev.preventDefault();
    ev.stopPropagation();
    ev.target.classList.remove('over');
    let text = ev.dataTransfer.getData('text');
    ev.target.innerHTML=text;
  }
}
</script>
</head>
<body>
<p id="p">螞蟻部落位於青島市南區</p>
<div id="box"></div>
</body>
</html>

拖動文字到底部矩形，拖動效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201910/10/122353a35ai77hdqhfh8f5.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

谷歌控制檯截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201910/10/122602yya66h966hj96hxa.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.從表象看，拖動一段字串內容到矩形。

（2）.但是，從控制檯列印效果看，拖動的資料有兩項。

（3）.這是因為拖動的內容不但有純文字，還包括HTML程式碼。

下面通過相關方法列印一下具體傳遞的資料，以證明上述第三條結論。

[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">
#box {
  width:300px; 
  height:100px;
  background-color:#ccc;
}
.over {
  border: 1px dashed #000;
  transform: scale(0.8, 0.8);
}
</style>
<script>
window.onload = () =>{
  let odiv=document.getElementById("box");
 
  odiv.ondragenter = (ev) => {
    ev.target.classList.add('over');
  }
  odiv.ondragover = (ev) => {
    ev.preventDefault();
  }
  odiv.ondragleave = (ev) => {
    ev.target.classList.remove('over');
  }
  odiv.ondrop = (ev) => {
    let itemList = ev.dataTransfer.items;
    for(let index=0;index<itemList.length;index++){
      itemList[index].getAsString(function(str){
        console.log(str);    
      });
    }
    ev.preventDefault();
    ev.stopPropagation();
    ev.target.classList.remove('over');
    let text = ev.dataTransfer.getData('text');
    ev.target.innerHTML=text;
  }
}
</script>
</head>
<body>
<p id="p">螞蟻部落位於青島市南區</p>
<div id="box"></div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201910/10/122635b10w72qoowdn91aa.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是列印結果的部分截圖，足以支撐第三條結論。

相關文章