第06章__HTML5的元素拖拽

1、第6章 HTML5的元素拖拽 6.1 HTML5拖拽實(shí)現(xiàn)方式 6.2 dataTransfer對(duì)象 拖放是一種常見的特性，即抓取對(duì)象以后拖到另一個(gè)位置。 在 HTML5 中，拖放是標(biāo)準(zhǔn)的一部分，任何元素都能夠拖放。 Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。 6.1 HTML5拖拽實(shí)現(xiàn)方式 在HTML5中將元素的“draggable”屬性設(shè)置為“true”后，對(duì)應(yīng)的元素就可以被拖拽了。拖拽元素將觸發(fā)一系列的事件，如下表所示事件名事件名稱稱作用對(duì)象作用對(duì)象說明說明dragstart 被拖拽元素拖拽動(dòng)作開始時(shí)觸發(fā)dra

2、g被拖拽元素拖拽動(dòng)作執(zhí)行時(shí)觸發(fā)dragenter被拖拽元素被拖拽元素進(jìn)入某元素時(shí)觸發(fā)dragover被拖拽元素被拖拽元素在某元素內(nèi)移動(dòng)時(shí)觸發(fā)目標(biāo)元素被拖拽元素離開目標(biāo)元素時(shí)觸發(fā)拖曳的步驟設(shè)置元素為可拖放：為了使元素可拖動(dòng)，把 draggable 屬性設(shè)置為 true 拖動(dòng)什么：定義dragstart函數(shù)，規(guī)定當(dāng)元素被拖動(dòng)時(shí)，會(huì)發(fā)生什么。同時(shí)設(shè)置用dataTransfer.setData() 方法設(shè)置被拖數(shù)據(jù)的數(shù)據(jù)類型和值。放到何處 ： ondragover 事件規(guī)定在何處放置被拖動(dòng)的數(shù)據(jù)。默認(rèn)地，無法將數(shù)據(jù)/元素放置到其他元素中。如果需要設(shè)置允許放置，我們必須阻止對(duì)元素的默認(rèn)處理方式。進(jìn)行放置

3、 ：會(huì)發(fā)生 drop 事件，要定義drop函數(shù)，處理被拖數(shù)據(jù)，通過 dataTransfer.getData(Text) 方法獲得被拖的數(shù)據(jù) 。6.2 dataTransfer對(duì)象在HTML5中，dataTransfer對(duì)象專門用于處理拖拽過程中產(chǎn)生的數(shù)據(jù)信息，該對(duì)象的屬性及說明如下表所示屬性名稱屬性名稱說明說明effectAllowed用于設(shè)置或返回指定元素被拖拽時(shí)被允許的顯示效果，可以設(shè)定的值包括“none”、“copy”、“copyLink”、“copyMove”，“l(fā)ink”，“l(fā)inkMove”，“move”，“all”、“uninitialized”dropEffect用于設(shè)置或返

4、回指定被拖拽元素釋放拖拽的顯示效果，該屬性設(shè)置的值必須在effectAllowed設(shè)置范圍內(nèi)，否則無效。items用于返回DataTransferItemList對(duì)象types用于返回已保存的數(shù)據(jù)類型，如果是文件操作則返回文件型字符串files用于返回被拖拽的文件列表 （1）setData(format, data)，該方法將指定類型的數(shù)據(jù)信息存入dataTransfer對(duì)象，參數(shù)format表示保存的數(shù)據(jù)類型，參數(shù)data表示數(shù)據(jù)內(nèi)容。應(yīng)用實(shí)例如下 src.ondragstart = function (e) /開始拖拽元素時(shí)觸發(fā) e.dataTransfer.setData(Text, e

5、.target.id); /使用dataTransfer保存拖拽元素ID msg.innerHTML=開始拖拽：+draggedID; target.appendChild(newElem); e.preventDefault(); dataTransfer對(duì)象常用方法包括dataTransfer對(duì)象常用方法包括 （2）getData(format)，該方法用于從dataTransfer對(duì)象中讀取指定類型的數(shù)據(jù)信息，參數(shù)format表示讀取的數(shù)據(jù)類型。應(yīng)用實(shí)例如下 target.ondrop = function (e) /在目的元素內(nèi)釋放拖拽元素時(shí)觸發(fā) var droppedID = e.d

6、ataTransfer.getData(Text); /從dataTransfer中獲取拖拽元素ID var newElem = document.getElementById(draggedID).cloneNode(false); target.innerHTML = ;dataTransfer對(duì)象常用方法包括 （3）clearData(format)，該方法用于從dataTransfer對(duì)象中移除指定類型的數(shù)據(jù)信息，參數(shù)format表示移除的數(shù)據(jù)類型。dataTransfer對(duì)象常用方法包括（4）setDragImage(image,x,y)，該方法用于設(shè)置拖拽過程中鼠標(biāo)指針顯示的圖標(biāo)，當(dāng)沒有顯示調(diào)用setDragImage方法進(jìn)行設(shè)置時(shí)，拖拽圖標(biāo)將使用默認(rèn)樣式。參數(shù)image用于設(shè)定拖拽圖標(biāo)的圖像元素，x用于設(shè)定圖標(biāo)與鼠標(biāo)指針在x軸方向的距離，y用于設(shè)定圖標(biāo)與鼠標(biāo)指針在y軸方向的距離。應(yīng)用實(shí)例如下 src.ondragstart = function (e) /開始拖拽元素時(shí)觸發(fā) draggedID = e.target.id; /獲取拖拽對(duì)象IDvar img = document.crea