dataTransfer.getData()無法獲取資料
通過dataTransfer.getData()方法可以獲取通過dataTransfer物件傳遞的資料。
關於dataTransfer物件傳遞的資料做一下簡單介紹:
(1).通過dataTransfer.setData()方法自定義的資料。
(2).拖拽的文或者從作業系統向瀏覽器拖拽檔案,無需使用setData()方法自定義。
但是dataTransfer.getData()方法有時候卻無法獲取資料。
當然出現的原因可能多種,下面介紹一下比較典型的一種,初學者比較容易在這方面出現失誤。
下面進行一下簡單演示:
[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); } odiv.ondragover = (ev) => { ev.preventDefault(); } odiv.ondragenter = (ev) => { console.log(ev.dataTransfer.getData("Text")); } 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元素的id屬性值。
這是因為要呼叫dataTransfer.getData()方法獲取資料需要在drop 事件處理函式中。
相關文章
- 在安卓 4.4.4 的機器上,獲取 app 冷熱啟動的資料無法獲取 WaitTime 資料安卓APPAI
- [BUG反饋]會員“最後登入IP”資料無法獲取
- [PolicyException: 無法獲取所需的許可權。]Exception
- git fetch 無法獲取遠端分支?Git
- IE瀏覽器非同步請求無法獲取最新資料的解決方案瀏覽器非同步
- Jenkins解決無法獲取外掛的辦法Jenkins
- ckeditor獲取資料
- victoriaMetrics無法獲取抓取target的問題
- 設定display:none無法獲取元素的尺寸None
- 獲取Wireshark資料流
- 1.獲取資料
- 【資料庫資料恢復】SqlServer資料庫無法讀取的資料恢復案例資料庫資料恢復SQLServer
- 獲取cookie辦法Cookie
- DataTransfer.getData() 方法
- datatables 獲取 pageLength 和 pageStart,重新獲取table資料
- 獲取的 Cookie 為什麼無法用於爬蟲Cookie爬蟲
- Linux中SFTP無法獲取目錄如何解決?LinuxFTP
- display:none的元素無法獲取offsetWidth和offsetHeightNone
- 網路卡無法獲取IP地址自己給他找個
- 電腦無法自動獲取IP地址怎麼辦?
- EditText無法獲取焦點(android:descendantFocusability用法簡析 )Android
- 【譯】React如何獲取資料React
- Mysql批量大資料獲取MySql大資料
- 獲取天氣介面資料
- 從session中獲取資料Session
- 微信小程式—— 獲取資料微信小程式
- 資料庫無法update資料庫
- ZABBIX伺服器端無法獲得AGENT資料解決方法伺服器
- DES加密後get獲取url引數無法解密問題加密解密
- java連線Oracle資料庫獲取資料JavaOracle資料庫
- 如獲取獲取關聯資料的文件跟模型的關聯資料集呢模型
- Python爬取免費IP代理時,無法解析到資料Python
- 《JavaScript設計模式》——第11章牛郎織女——代理模式11.1無法獲取圖片上傳模組資料JavaScript設計模式
- Flutter 中的資料的獲取Flutter
- JavaScript獲取物件資料型別JavaScript物件資料型別
- Python獲取jsonp資料PythonJSON
- TreeMap get獲取資料為nullNull
- jdbcTemplate 獲取資料表結構JDBC