第06章__HTML5的元素拖拽

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

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

3、 ：會發(fā)生 drop 事件，要定義drop函數(shù)，處理被拖數(shù)據(jù)，通過 dataTransfer.getData(Text) 方法獲得被拖的數(shù)據(jù) 。6.2 dataTransfer對象在HTML5中，dataTransfer對象專門用于處理拖拽過程中產(chǎn)生的數(shù)據(jù)信息，該對象的屬性及說明如下表所示屬性名稱屬性名稱說明說明effectAllowed用于設(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對象types用于返回已保存的數(shù)據(jù)類型，如果是文件操作則返回文件型字符串files用于返回被拖拽的文件列表 （1）setData(format, data)，該方法將指定類型的數(shù)據(jù)信息存入dataTransfer對象，參數(shù)format表示保存的數(shù)據(jù)類型，參數(shù)data表示數(shù)據(jù)內(nèi)容。應(yīng)用實例如下 src.ondragstart = function (e) /開始拖拽元素時觸發(fā) e.dataTransfer.setData(Text, e

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

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