您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)HTML5中dataTransfer對(duì)象的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
雖然通過dragstart、drag和dragend事件實(shí)現(xiàn)了原生拖拽。但是這僅僅是拖拽,在IE6和IE7中還是有些拖拽問題,并且也沒有實(shí)現(xiàn)數(shù)據(jù)的交換。為了實(shí)現(xiàn)數(shù)據(jù)的交換,IE5引入了dataTransfer對(duì)象。dataTransfer對(duì)象是事件對(duì)象的一個(gè)屬性,用于從被拖拽元素相放置目標(biāo)傳遞字符串格式的數(shù)據(jù)。因?yàn)樗鞘录?duì)象的屬性,所以只能在拖放事件的事件處理程序中訪問dataTransfer對(duì)象。在事件處理程序中,可以使用這個(gè)對(duì)象的屬性和方法來完善拖放功能。
dataTransfer對(duì)象有兩個(gè)主要的方法:getData()方法和setData()方法。從這兩個(gè)方法的英文字面意思上就能大概猜出來其用途。getData()方法可以取得由setData()方法保存的值。setData()方法的第一個(gè)參數(shù),也是getData()方法唯一的一個(gè)參數(shù),是用來保存數(shù)據(jù)類型的字符串,取值是”text”或”URL”。
IE只定義了”text”或”URL”兩種有效的數(shù)據(jù)類型,而HTML5則對(duì)此加以擴(kuò)展,允許指定各種MIME類型??紤]到向后兼容,HTML5也支持”text”或”URL”,但這兩種類型會(huì)被映射為”text/plain”或”text/url-list”。
實(shí)際上,dataTransfer對(duì)象可以為每種MIME類型都保存一個(gè)值。也就是說同事在這個(gè)對(duì)象中保存一段文本和一個(gè)URL不會(huì)有其他問題。不過,保存在dataTransfer對(duì)象中的數(shù)據(jù)只能在drop事件處理程序中讀取。如果在ondrop處理程序中沒有讀取數(shù)據(jù),那就是dataTransfer對(duì)象已經(jīng)被銷毀,數(shù)據(jù)也就隨之丟失了。
在拖動(dòng)文本框中的文本時(shí),瀏覽器會(huì)調(diào)用setData()方法,將拖動(dòng)的文本以”text”格式保存在dataTransfer對(duì)象中。類似地,在拖放鏈接或圖像時(shí),會(huì)調(diào)用setData()方法并保存URL。然后,在這些元素被拖放到放置目標(biāo)時(shí),就可以通過getData()方法讀到這些數(shù)據(jù)。當(dāng)然,作為開發(fā)人員,你也可以通過dragstart事件處理程序中調(diào)用setData(),手工保存自己要傳輸?shù)臄?shù)據(jù),以便將來使用。
將數(shù)據(jù)保存在文本和保存為URL是有區(qū)別的。如果將數(shù)據(jù)保存為文本格式,那么數(shù)據(jù)不會(huì)得到任何特殊處理。如果保存為URL格式,瀏覽器會(huì)將其當(dāng)成網(wǎng)頁中的鏈接。如果你將這個(gè)URL放置到另一個(gè)瀏覽器窗口中,就可以打開該URL。
Firefox 5及之前版本是不能將”url”和”text”映射為””和”text/plain”。但是卻能把”Text”(T大寫)映射為”text/plain”。為了更好地在跨瀏覽器的情況下從dataTransfer對(duì)象取得數(shù)據(jù),最好在取得URL數(shù)據(jù)時(shí)檢測(cè)兩個(gè)值,而在取得文本數(shù)據(jù)時(shí)使用”Text”。
注意,一定要把短數(shù)據(jù)類型放在前面,因?yàn)镮E10及之前的版本仍然不支持?jǐn)U展的MIME類型名,而它們?cè)谟龅綗o法識(shí)別的數(shù)據(jù)類型時(shí),會(huì)報(bào)錯(cuò)。不過”text”或”URL”取值只有IE是強(qiáng)制的,在火狐3.6+、Chrome和Opera中設(shè)置其他任意值的字符串也能正常執(zhí)行。
運(yùn)用dataTransfer對(duì)象,不僅僅能傳輸數(shù)據(jù),還能通過dataTransfer對(duì)象確定被拖拽的元素以及作為放置目標(biāo)的元素能夠接收什么操作。要實(shí)現(xiàn)這樣的功能就用到了dropEffect屬性和effectAllowed屬性。
其中,通過dropEffect屬性可以知道被拖動(dòng)的元素能夠執(zhí)行哪種行為。這個(gè)屬性的四個(gè)值如下:
none:不能把拖動(dòng)的元素放在這里。這是除了文本框之外所有元素默認(rèn)的值。
move:應(yīng)該把拖動(dòng)的元素移動(dòng)到放置目標(biāo)。
copy:應(yīng)該把拖動(dòng)的元素復(fù)制到放置目標(biāo)。
link:放置目標(biāo)會(huì)打開拖動(dòng)的元素(但拖動(dòng)的元素必須是個(gè)鏈接,有URL地址)。
把元素拖動(dòng)到放置目標(biāo)上的時(shí)候,以上每一個(gè)值都會(huì)導(dǎo)致光標(biāo)顯示為不同的符號(hào)。
光有dropEffect屬性是不咋管用的。只有結(jié)合effectAllowed屬性一起使用才能發(fā)揮功效。effectAllowed屬性表示允許拖動(dòng)元素的哪種行為(dropEffect)。effectAllowed屬性也有很多值,其值如下:
uninitialized:沒有給被拖動(dòng)元素設(shè)置任何放置行為。
none:被拖動(dòng)的元素不能有任何行為。
copy:只允許值為”copy”的dropEffect。
link:只允許值為”link”的dropEffect。
move:只允許值為”move”的dropEffect。
copyLink:允許值為”copy”和”link”的dropEffect。
copyMove:允許值為”copy”和”move”的dropEffect。
linkMove:允許值為”link”和”move”的dropEffect。
all:允許任意dropEffect。
要設(shè)置effectAllowed屬性必須在ondragstart事件處理程序中設(shè)置。小例子如下
HTML代碼
[html] view plaincopyprint?
<ul> <li draggable="true">夢(mèng)龍小站</li> <li draggable="true">夢(mèng)龍小站</li> <li draggable="true">夢(mèng)龍小站</li> </ul> <a href="http://www.baidu.com/">夢(mèng)龍小站</a> <p id="p1">夢(mèng)龍小站</p>
CSS代碼
[css] view plaincopyprint? li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;} #p1{ width:100px; height:100px; background:red; margin:300px;}
JavaScript代碼
[javascript] view plaincopyprint? //dataTransfer對(duì)象 : 連接拖拽細(xì)節(jié)的 ,在event對(duì)象下面的 //拖動(dòng)不帶鏈接的li,會(huì)起作用但不跳轉(zhuǎn)鏈接 //拖動(dòng)帶連接的a,會(huì)起作用也跳轉(zhuǎn) window.onload = function(){ var aLi = document.getElementsByTagName('li'); var aA = document.getElementsByTagName('a'); var op = document.getElementById('p1'); for(var i=0;i<aLi.length;i++){ aLi[i].ondragstart = function(ev){ //拖拽前觸發(fā) this.style.background = 'yellow'; ev.dataTransfer.setData('a','hello'); //存儲(chǔ)一個(gè)鍵值對(duì) : value值必須是字符串 ev.dataTransfer.effectAllowed = 'all'; ev.dataTransfer.setDragImage(this,0,0); }; aLi[i].ondragend = function(){ //拖拽結(jié)束觸發(fā) this.style.background = ''; }; } for(var i=0;i<aA.length;i++){ aA[i].ondragstart = function(ev){ //拖拽前觸發(fā) this.style.background = 'yellow'; ev.dataTransfer.setData('a','hello'); //存儲(chǔ)一個(gè)鍵值對(duì) : value值必須是字符串 ev.dataTransfer.effectAllowed = 'link'; ev.dataTransfer.setDragImage(this,0,0); }; aA[i].ondragend = function(){ //拖拽結(jié)束觸發(fā) this.style.background = ''; }; } op.ondragenter = function(){ //相當(dāng)于onmouseover this.style.background = 'green'; }; op.ondragleave = function(){ //相當(dāng)于onmouseout this.style.background = 'red'; }; op.ondragover = function(ev){ //進(jìn)入目標(biāo)、離開目標(biāo)之間,連續(xù)觸發(fā) ev.preventDefault(); //阻止默認(rèn)事件:元素就可以釋放了 ev.dataTransfer.dropEffect = 'link'; //真對(duì)外部文件 }; op.ondrop = function(ev){ //釋放鼠標(biāo)的時(shí)候觸發(fā) this.style.background = 'red'; alert( ev.dataTransfer.getData('a') ); }; };
關(guān)于“HTML5中dataTransfer對(duì)象的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。