DataTransferItem.type 屬性
拖拽操作可以通過DataTransfer物件從源元素向目標元素傳遞資料。
DataTransferItemList 集合包含所有傳遞的資料項列表。
集合中的每一項就是一個DataTransferItem型別物件,表示一條傳遞的資料。
DataTransferItem.type 屬性返回當前項所表示傳遞的資料的MIME型別,只讀屬性。
關於DataTransferItem物件更多內容參閱DataTransferItem 物件一章節。
語法結構:
[JavaScript] 純文字檢視 複製程式碼let itemType = DataTransferItem.type
屬性比較簡單,下面通過程式碼例項進行一下演示。
[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; op.innerHTML = "type:" + itemList[0].type; } } </script> </head> <body> <p draggable="true" id="p"></p> <div id="box"></div> </body> </html>
拖動P元素到底部的div元素中去,執行效果截圖如下:
程式碼分析如下:
(1).拖動P元素到底部DIV元素中去,但不要因此認為通過DataTransfer物件傳遞的是P元素。
(2).本程式碼中,通過DataTransfer物件傳遞的是用setData()方法設定的P元素id屬性值。
(3).ev.dataTransfer.items獲取的是表示傳遞所有資料的DataTransferItemList集合。
(4).集合中每一項代表一條傳遞的資料,本文程式碼中只傳遞了一條,那就是P的id屬性值。
(5).設定id屬性值的MIME型別為"text/plain",所以itemList[0].type返回值是"text/plain"。
相關文章
- CMake 屬性之全域性屬性
- iOS動畫 屬性屬性解析iOS動畫
- defer 屬性和 async 屬性
- CSS 屬性篇(七):Display屬性CSS
- CMake 屬性之目標屬性
- CMake 屬性之目錄屬性
- JavaScript私有屬性和靜態屬性JavaScript
- CSS字型屬性和文字屬性詳解CSS
- 私有屬性
- allowfullscreen 屬性
- background 屬性
- cssText 屬性CSS
- translucent屬性
- parentStyleSheet屬性
- cssRules 屬性CSS
- background屬性
- jQuery 屬性jQuery
- 屬性動畫動畫
- jQuery屬性jQuery
- TextView屬性TextView
- XML屬性XML
- Property屬性
- DOM屬性
- HTML 屬性HTML
- ref屬性
- Python - 物件導向程式設計 - 公共屬性、保護屬性、私有屬性Python物件程式設計
- CAD屬性編輯操作——物件屬性教程物件
- WPF 之 依賴屬性與附加屬性(五)
- jQuery設定disabled屬性與移除disabled屬性jQuery
- Python 類的屬性與例項屬性Python
- python物件屬性管理(2):property管理屬性Python物件
- 框架(frameset),全域性屬性框架
- js如何獲取給定屬性的屬性值JS
- Blob type 屬性
- Blob size 屬性
- JavaScript files 屬性JavaScript
- URL hostname 屬性
- URL pathname 屬性