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()
- 集合框架-TreeMap集合框架
- 集合框架-Set集合框架
- 集合框架-TreeSet集合框架
- 集合框架-Collection集合框架
- 集合框架-List集合框架
- 【Java集合】1 集合概述Java
- 集合框架-集合總結框架
- 集合框架-List集合-2框架
- 集合框架-List集合-3框架
- 集合框架-Collection集合-2框架
- 集合框架-Collection集合-3框架
- Guava集合--Immutable(不可變)集合Guava
- Guava集合--新集合型別Guava型別
- 集合框架-Map集合功能概述框架
- 集合框架-HashMap集合的案例框架HashMap
- Java集合(1)一 集合框架Java框架
- 集合框架-Collection集合總結框架
- 集合框架-Map集合的遍歷框架
- 【集合框架】Java集合框架綜述框架Java
- 【Java集合原始碼剖析】Java集合框架Java原始碼框架
- 集合框架-集合的巢狀遍歷框架巢狀
- 【JAVA集合】JAVA集合框架及其常用方法Java框架
- 集合框架框架
- redis集合Redis
- java——集合Java
- Swift,集合Swift
- Redis 集合Redis
- Oracle 集合Oracle
- java集合Java
- Map集合
- Java集合詳解(一):全面理解Java集合Java
- Java集合 - 集合知識點總結概述Java
- 【java】【集合】陣列和集合的基本概述Java陣列
- 第三章——集合(集合協議)協議