DataTransferItem.getAsString()
拖拽操作可以通過DataTransfer物件從源元素向目標元素傳遞資料。
DataTransferItemList 集合包含所有傳遞的資料項列表。
集合中的每一項就是一個DataTransferItem型別物件,表示一條傳遞的資料。
關於DataTransferItem物件更多內容參閱DataTransferItem 物件一章節。
DataTransferItem.getAsString()方法具有一個回撥函式引數。
DataTransferItem.kind屬性值為"string"的傳遞資料作為其回撥函式的引數。
語法結構:
[JavaScript] 純文字檢視 複製程式碼dataTransferItem.getAsString(callback)
引數解析:
(1).callback:回撥函式。
DataTransferItem.kind屬性值為"string"的傳遞資料作為回撥函式的引數。
程式碼例項如下:
[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/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元素中去,會將指定內容寫入P中。
程式碼執行效果截圖如下:
程式碼分析如下:
(1).拖動紅色P元素到DIV元素中,但是不要因此認為通過DataTransfer物件傳遞的就是P元素。
(2).P元素的位置移動是通過appendChild()實現的。
(3).DataTransfer實際傳遞的資料是通過dataTransfer.setData("text/plain",ev.target.id)設定的id屬性值。
(4).很明顯資料型別是string,這個id屬性值作為引數傳遞給回撥函式。