DataTransferItem 物件

admin發表於2019-10-12

拖拽操作可以通過DataTransfer物件從源元素向目標元素傳遞資料。

DataTransferItemList 集合包含所有傳遞的資料項列表。

集合中的每一項就是一個DataTransferItem型別物件,表示一條傳遞的資料。

相關閱讀:

(1).DataTransfer物件參閱DataTransfer 物件一章節。

(2).DataTransferItemList集合參閱DataTransferItemList 集合一章節。

一.DataTransferItem具有的屬性:

(1).kind:返回傳遞資料的類別,返回值只能是string 或 file。

(2).type:返回傳遞資料的型別,通常是MIME 型別。

二.DataTransferItem具有的方法:

(1).getAsFile():返回與傳遞資料關聯的 File 物件(如果拖動項不是檔案,則返回 null)。

(2).getAsString():將傳遞的字串資料作為回撥函式的引數。

三.程式碼例項:

[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;
  font-size:12px;
  text-align:center;
}
#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/plain",ev.target.id);
  }
   
  odiv.ondragover = (ev) => {
    ev.preventDefault();
  }
    
  odiv.ondrop = (ev) => {
    ev.preventDefault();
    ev.stopPropagation();

    let data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));

    // 測試效果
    let itemList = ev.dataTransfer.items;
    itemList[0].getAsString(function(str){
      op.innerHTML="ID屬性值為:"+str;
    })
  }
}
</script>
</head>
<body>
  <p draggable="true" id="p"></p>
  <div id="box"></div>
</body>
</html>

上述程式碼將p元素拖動到div元素中,並且寫入一段字串。

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

a:3:{s:3:\"pic\";s:43:\"portal/201910/12/003927e35hffz9pe5xfaxz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

下面對程式碼進行一下分析:

[JavaScript] 純文字檢視 複製程式碼
ev.dataTransfer.setData("text/plain",ev.target.id)

拖動的P元素,但是不能想當然認為傳遞的資料就是P元素。

上面程式碼中傳遞的資料是通過setData()方法設定的id屬性值。

通過ev.dataTransfer.items可以獲取DataTransferItemList集合。

集合中只有一項,代表著我們傳遞的id屬性值。

[JavaScript] 純文字檢視 複製程式碼
itemList[0].getAsString(function(str){
  op.innerHTML="ID屬性值為:"+str;
})

通過索引獲取集合中的資料項(DataTransferItem 型別物件)。

再呼叫其方法getAsString()將字串寫入P元素,回掉函式引數是setData()設定的id屬性值。

相關文章