DataTransfer 物件
本文將從總體上對此物件進行一下分析,具體細節可以檢視對應的文章。
理解此物件,可以從其名稱入手,DataTransfer可以分解為如下兩個單詞:
(1).data:翻譯成漢語具有"資料"的意思。
(2).transfer:翻譯成漢語具有"轉移"或者"搬遷"的意思。
由此可以推測,此物件的功能是用於資料傳遞,事實也是如此。
DataTransfer型別物件在拖動操作中主要起到媒介作用,用於從源物件向目標物件傳遞資料。
在源物件中設定資料,然後在目標物件獲取,當然也有其他功能,後面有相關文章連結。
關於HTML5 拖拽的總體介紹可以參閱Drag & Drop 拖拽詳解一章節。
首先看一段程式碼例項:
[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 = () =>{ 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.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>
程式碼實現了簡單的拖拽效果,可以將紅色矩形移動到灰色矩形中。
下面介紹一下DataTransfer物件在其中所起到的作用。
[JavaScript] 純文字檢視 複製程式碼op.ondragstart = (ev) => { ev.dataTransfer.setData("Text",ev.target.id); }
當源元素被開始拖動的時候觸發dragstart事件,在此事件處理函式中可以規定傳遞的資料。
DataTransfer型別物件通過事件物件的dataTransfer屬性獲取。
上述程式碼通過setData()方法將源元素的id值儲存起來。
關於setData()的具體用法可以參閱文章底部的相關文章連結。
[JavaScript] 純文字檢視 複製程式碼odiv.ondrop = (ev) => { ev.preventDefault(); ev.stopPropagation(); let data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
當將源元素放置於目標元素中,完成拖拽時觸發drop事件。
通過getData()方法可以獲取通過setData()方法儲存的資料,也就是id屬性值。
可以看到DataTransfer物件的主要功能是作為一個資料傳遞中介,當然還有其他功能。
下面是此物件具有的屬性和方法相關文章:
(1).dataTransfer.effectAllowed 屬性一章節。
(2).dataTransfer.dropEffect 屬性一章節。
(3).dataTransfer.files 屬性一章節。
(4).dataTransfer.types 屬性一章節。
(5).dataTransfer.items 屬性一章節。
(6).dataTransfer.setData() 方法一章節。
(7).dataTransfer.getData() 方法一章節。
(8).dataTransfer.clearData() 方法一章節。
(9).dataTransfer.setDragImage() 方法一章節。
相關文章
- DataTransfer.getData() 方法
- DataTransfer.effectAllowed 屬性
- dataTransfer.dropEffect 屬性
- DataTransfer.files 屬性
- DataTransfer.types 屬性
- DataTransfer.items 屬性
- dataTransfer.setData() 用法詳解
- dataTransfer.getData()無法獲取資料
- session物件、cookie物件和appliaction物件Session物件CookieAPP
- Javascript 物件 – 字串物件JavaScript物件字串
- 函式物件、物件、原型函式物件原型
- 物件導向,搞定物件物件
- 物件獲取原型物件物件原型
- Javascript 物件 – 數學物件JavaScript物件
- Javascript 物件 – 陣列物件JavaScript物件陣列
- jQuery物件和DOM物件jQuery物件
- 值物件與引用物件物件
- JavaScript 本地物件、內建物件和宿主物件JavaScript物件
- Golang中多大的物件算是大物件,多小的物件算是小物件?Golang物件
- JavaScript課程——Day07(物件簡介、Math物件、時間物件、字串物件)JavaScript物件字串
- js,javascript陣列物件的父級物件 – 子集物件(陣列物件相減)JSJavaScript陣列物件
- JavaScript 複習之包裝物件,Boolean物件,Number物件JavaScript物件Boolean
- 偽物件、樁物件、模擬物件|單元測試物件
- JS筆記—— 物件 (原型物件)JS筆記物件原型
- 事務物件和命令物件物件
- 物件鎖:傳遞物件鎖物件
- ejb主物件,物件,例項 ?物件
- 引用物件與例項物件物件
- 物件物件
- 內建物件、宿主物件和本地物件是什麼物件
- JavaScript物件與建立物件的方式JavaScript物件
- Js物件導向(1): 理解物件JS物件
- jquery物件如何轉化成DOM物件jQuery物件
- 物件導向-物件導向思想物件
- jsp隱式物件-Servlet物件JS物件Servlet
- JavaScript內部物件和Date物件JavaScript物件
- Java物件導向——類與物件Java物件
- 物件與物件引用的區別物件