DataTransferItem.kind 屬性
拖拽操作可以通過DataTransfer物件從源元素向目標元素傳遞資料。
DataTransferItemList 集合包含所有傳遞的資料項列表。
集合中的每一項就是一個DataTransferItem型別物件,表示一條傳遞的資料。
DataTransferItem.kind 屬性返回當前項所表示傳遞的資料的型別,只讀屬性。
關於DataTransferItem物件更多內容參閱DataTransferItem 物件一章節。
語法結構:
[JavaScript] 純文字檢視 複製程式碼let itemKind = DataTransferItem.kind
只讀屬性,屬性返回值只有兩個:
(1)."string"。
(2)."file"。
程式碼例項如下:
[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 = "Kind:" + itemList[0].kind; } } </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屬性值的是字串型別,所以itemList[0].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"> #demo { margin: 20px; } #demo .preview { height: 300px; width:300px; background: #ddd; } #demo li { list-style:none; } #demo img { max-height: 150px; width: auto; } </style> <script> window.onload = () => { let preview = document.querySelector('.preview'); preview.addEventListener('dragover', function (e) { e.preventDefault(); }, false); preview.addEventListener('drop', function (e) { e.preventDefault(); e.stopPropagation(); let itemList = e.dataTransfer.items; for(let index=0;index<itemList.length;index++){ console.log(itemList[index].kind); } [].forEach.call(e.dataTransfer.files, function (file) { if (file && file.type.match('image.*')) { let reader = new FileReader(); reader.onload = function (e) { var img = document.createElement('img'); img.src = e.target.result; var li = document.createElement('li'); li.appendChild(img); preview.appendChild(li); }; reader.readAsDataURL(file); } }); }, false); } </script> </head> <body> <div id="demo"> <h3>拖拽圖片進入下面區域預覽</h3> <ul class="preview"></ul> </div> </body> </html>
拖動圖片到底部的灰色區域,可以在控制檯看到列印結果:
從作業系統向瀏覽器拖動檔案,kind屬性返回值是"file"。
相關文章
- 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 屬性