DataTransfer.getData() 方法
通過DataTransfer 物件可以從源元素向目標元素傳遞資料。
DataTransfer.getData() 方法可以獲取所傳遞的指定型別資料。
如果不存在指定型別的資料,那麼返回一個空字串。
關於DataTransfer物件總體介紹參閱DataTransfer 物件一章節。
語法結構:
[JavaScript] 純文字檢視 複製程式碼dataTransfer.getData(format)
引數解析:
(1).format:規定要返回資料的型別。
關於format資料型別更多內容可以參閱DataTransfer.setData()一章節。
程式碼例項如下:
[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",ev.target.id); ev.dataTransfer.setData("text/uri-list","http://www.softwhy.com/ant.jpg"); } odiv.ondragover = (ev) => { ev.preventDefault(); } odiv.ondrop = (ev) => { ev.preventDefault(); ev.stopPropagation(); let data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } } </script> </head> <body> <p draggable="true" id="p"></p> <div id="box"></div> </body> </html>
上述程式碼可以將p元素拖動到底部div中,下面分析如下:
(1).將P元素拖拽到底部的DIV元素之中。
(2).因此不要以為通過DataTransfer傳遞的就是P元素。
(3).通過setData()方法設定了兩個不同型別的資料。
(4).但是我們在drop事件處理函式中僅獲取型別為"Text"的資料,也就是p的id屬性值。
[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"> #box { width:300px; height:100px; background-color:#ccc; } .over { border: 1px dashed #000; transform: scale(0.8, 0.8); } </style> <script> window.onload = () =>{ let odiv=document.getElementById("box"); odiv.ondragenter = (ev) => { ev.target.classList.add('over'); } odiv.ondragover = (ev) => { ev.preventDefault(); } odiv.ondragleave = (ev) => { ev.target.classList.remove('over'); } odiv.ondrop = (ev) => { ev.preventDefault(); ev.stopPropagation(); ev.target.classList.remove('over'); let text = ev.dataTransfer.getData('text'); ev.target.innerHTML=text; } } </script> </head> <body> <p id="p">螞蟻部落位於青島市南區</p> <div id="box"></div> </body> </html>
上述程式碼可以將選中的文字寫入底部的div元素中。
可以看到,我們沒有使用setData()方法設定傳遞資料,但是依然可以獲取。
傳遞資料的設定系統幫我們自動完成,從作業系統拖拽檔案到瀏覽器也是如此。
相關文章
- dataTransfer.getData()無法獲取資料
- Java中parse方法,ValueOf方法,toString方法Java
- Python例項方法、類方法、靜態方法Python
- js includes方法 和 filter方法JSFilter
- Java的方法靜態方法Java
- show()方法和hide()方法IDE
- 徹底理解了call()方法,apply()方法和bind()方法APP
- Python Class 的例項方法/類方法/靜態方法Python
- slideUp()方法和slideDown()方法IDE
- 物件導向2--靜態方法、類方法、屬性方法物件
- javaSE-day04--ArrayList基本用方法、類內定義方法和方法過載、靜態方法static(類的方法)、工具方法(static)的定義和使用Java
- 來看看兩種好玩的方法,擴充套件方法和分部方法套件
- initialize方法與load方法比較
- Java System類,currentTimeMillis方法,arraycopy方法。Java
- jQuery方法原始碼定位簡單方法jQuery原始碼
- 細說equals()方法和hashCode()方法
- prop()方法和attr()方法的區別
- 詳解equals()方法和hashCode()方法
- exitFullscreen() 方法
- Promise then() 方法Promise
- removeProperty() 方法REM
- deleteRule() 方法delete
- getPropertyPriority() 方法
- getPropertyValue() 方法
- main()方法AI
- javascriptreplaceAll方法JavaScript
- main方法AI
- 字串方法字串
- call() 方法
- 【MyBatis原始碼分析】insert方法、update方法、delete方法處理流程(上篇)MyBatis原始碼delete
- 【MyBatis原始碼分析】insert方法、update方法、delete方法處理流程(下篇)MyBatis原始碼delete
- 方法的過載、可變形參的方法、方法的引數值傳遞機制、遞迴方法遞迴
- jQuery中過濾方法slice()方法如何使用?jQuery
- Java方法02:方法的定義和呼叫Java
- Java中方法重寫與方法過載Java
- Server.MapPath方法的應用方法ServerAPP
- Python - 物件導向程式設計 - 例項方法、靜態方法、類方法Python物件程式設計
- laravel中delete()方法和destroy()方法的區別Laraveldelete