DataTransferItem 物件
拖拽操作可以通過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元素中,並且寫入一段字串。
程式碼執行效果截圖如下:
下面對程式碼進行一下分析:
[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屬性值。
相關文章
- DataTransferItem.getAsFile()
- DataTransferItem.getAsString()
- DataTransferItem.kind 屬性
- DataTransferItem.type 屬性
- session物件、cookie物件和appliaction物件Session物件CookieAPP
- Javascript 物件 – 字串物件JavaScript物件字串
- 函式物件、物件、原型函式物件原型
- 物件導向,搞定物件物件
- 物件獲取原型物件物件原型
- Javascript 物件 – 數學物件JavaScript物件
- Javascript 物件 – 陣列物件JavaScript物件陣列
- jQuery物件和DOM物件jQuery物件
- 值物件與引用物件物件
- JavaScript 本地物件、內建物件和宿主物件JavaScript物件
- Golang中多大的物件算是大物件,多小的物件算是小物件?Golang物件
- JavaScript課程——Day07(物件簡介、Math物件、時間物件、字串物件)JavaScript物件字串
- js,javascript陣列物件的父級物件 – 子集物件(陣列物件相減)JSJavaScript陣列物件
- JavaScript 複習之包裝物件,Boolean物件,Number物件JavaScript物件Boolean
- 偽物件、樁物件、模擬物件|單元測試物件
- JS筆記—— 物件 (原型物件)JS筆記物件原型
- 事務物件和命令物件物件
- 物件鎖:傳遞物件鎖物件
- ejb主物件,物件,例項 ?物件
- 引用物件與例項物件物件
- 物件物件
- 內建物件、宿主物件和本地物件是什麼物件
- JavaScript物件與建立物件的方式JavaScript物件
- Js物件導向(1): 理解物件JS物件
- jquery物件如何轉化成DOM物件jQuery物件
- 物件導向-物件導向思想物件
- jsp隱式物件-Servlet物件JS物件Servlet
- JavaScript內部物件和Date物件JavaScript物件
- Java物件導向——類與物件Java物件
- 物件與物件引用的區別物件
- JS_建立物件+呼叫物件方法JS物件
- 如何用Map物件建立Set物件物件
- 區別 Jquery物件和Dom物件jQuery物件
- Java物件及物件引用變數Java物件變數