DataTransferItemList 集合
此集合物件提供拖拽操作所有遞資料的列表。
DataTransfer物件可以實現從源元素向目標元素傳遞資料。
關於DataTransfer物件總體介紹可以參閱DataTransfer 物件一章節。
集合中的每一個項是DataTransferItem型別物件,代表著拖拽操作中的一條傳遞資料。
DataTransfer.items屬性可以返回DataTransferItemList型別資料。
一.DataTransferItemList具有的屬性:
(1).length:返回集合中傳遞資料的數目。
二.DataTransferItemList具有的方法:
(1).add():向集合中新增一個新項。
(2).remove():根據索引移除集合中的指定項。
(3).clear():清空集合中的所有專案。
(4).DataTransferItem():返回指定索引的項,也就是DataTransferItem型別物件。
三.程式碼例項:
下面是一段程式碼例項,簡單演示DataTransferItemList 集合。
集合屬性和方法的具體用法,可以參閱本版塊教程對應的文章。
[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/plain",ev.target.id); ev.dataTransfer.setData("text/uri-list","http://www.softwhy.com"); } odiv.ondragover = (ev) => { ev.preventDefault(); } odiv.ondrop = (ev) => { ev.preventDefault(); ev.stopPropagation(); let itemList = ev.dataTransfer.items; console.log(itemList); } } </script> </head> <body> <p draggable="true" id="p"></p> <div id="box"></div> </body> </html>
拖動紅色矩形到底部灰色矩形,在谷歌控制檯檢視列印效果如下:
下面對上述程式碼進行一下簡單分析:
[JavaScript] 純文字檢視 複製程式碼ev.dataTransfer.setData("text/plain",ev.target.id); ev.dataTransfer.setData("text/uri-list","http://www.softwhy.com");
通過setData()方法設定兩個傳遞資料。
[JavaScript] 純文字檢視 複製程式碼let itemList = ev.dataTransfer.items; console.log(itemList)
items屬性可以返回DataTransferItemList型別集合。
集合中的每一個項代表一個傳遞的資料,然後在谷歌控制檯列印出來。
並不是所有傳遞的資料都需要使用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"> #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(); // 效果演示 let itemList = ev.dataTransfer.items; console.log(itemList); 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>
選中並拖動一段文字進入底部矩形,檢視谷歌控制檯列印效果:
下面對程式碼進行一下簡單分析:
(1).拖動文字並沒有採用setData()方法設定資料,系統會自動完成。
(2).兩項是因為,拖動時候包括純文字和html程式碼,可通過DataTransferItem.getAsString()檢視具體內容。
getAsString()可以參閱DataTransferItem.getAsString()一章節。
相關文章
- DataTransferItemList.length
- DataTransferItemList.remove()REM
- DataTransferItemList.clear()
- DataTransferItemList.add()
- 【Java集合】1 集合概述Java
- Guava集合--新集合型別Guava型別
- Guava集合--Immutable(不可變)集合Guava
- Collection集合、List集合及其方法
- Hash Map集合和Hash Set集合
- L2-005 集合相似度【集合】
- 【Java集合原始碼剖析】Java集合框架Java原始碼框架
- 【JAVA集合】JAVA集合框架及其常用方法Java框架
- 集合容器
- Map集合
- java集合Java
- 集合sum
- 集合框架框架
- redis集合Redis
- 【java】【集合】陣列和集合的基本概述Java陣列
- Java集合 - 集合知識點總結概述Java
- Java集合詳解(一):全面理解Java集合Java
- Java程式設計基礎17——集合(List集合)Java程式設計
- List集合(ArrayList-LinkedList);Set集合(HashSet-TreeSet)
- 【Java集合】單列集合Collection常用方法詳解Java
- 洛谷題單指南-集合-P1621 集合
- 年度文章集合 | 最全微前端集合【建議收藏】前端
- 泛型方法、初始集合和集合的遍歷泛型
- Map集合&&Map集合的不同遍歷【keySet()&&entrySet()】
- Java 集合概述Java
- 字典和集合
- Go示例集合Go
- 集合類【Java】Java
- scala(四)集合
- 【java】【集合】TreeSetJava
- JAVA集合-ArrayListJava
- Java集合——LinkedHashMapJavaHashMap
- 探究Java集合Java
- JavaScript 元素集合JavaScript