《HTML5網(wǎng)頁前端設(shè)計》教案第5章HTML5拖放API一、教學(xué)目標(biāo)：了解拖放的概念；熟悉拖放事件DragEvent；熟悉DataTransfer對象；掌握拖放HTML元素的方法；掌握拖放本地文件的方法。二、教學(xué)重點(diǎn)和難點(diǎn)：重點(diǎn)：熟悉DataTransfer對象；難點(diǎn)：掌握拖放HTML元素和本地文件的方法。三、教學(xué)方法與手段：采取互動式教學(xué)方法，理論教學(xué)使用多媒體投影教室。四、課程簡介：本章主要介紹HTML5拖放API的功能與應(yīng)用。HTML5拖放API可以用于拖拽網(wǎng)頁中的元素并放置到頁面上的指定區(qū)域，也可以直接將本地電腦上的文件拖放到網(wǎng)頁中。HTML5拖放API增強(qiáng)了頁面友好度，使用該技術(shù)可以開發(fā)出用戶體驗(yàn)良好的人機(jī)交互界面。五、教學(xué)基本內(nèi)容：5.1HTML5新增拖放API HTML5拖放API規(guī)定了所有元素都可以被拖放。具體來說，HTML5定義的拖放這一行為指的是用戶可以使用鼠標(biāo)左鍵點(diǎn)擊選中允許拖放的元素或文件，在保持鼠標(biāo)左鍵按下的情況下可以移動該元素至頁面的任意位置，并且在移動到處于具有允許放置狀態(tài)的元素上釋放鼠標(biāo)左鍵放置被拖放的元素。其中從鼠標(biāo)左鍵按下選中元素，到保持鼠標(biāo)左鍵按下并移動該元素的整個過程稱為“拖”；將被拖動的元素放置在許可放置的區(qū)域上方并釋放鼠標(biāo)左鍵的行為稱為“放”。整個拖放過程增強(qiáng)了人機(jī)交互的功能。5.2瀏覽器支持情況 瀏覽器EdgeFirefoxChromeSafariOpera支持情況9.0及以上版本4.0及以上版本20及以上版本5.0及以上版本12及以上版本5.3HTML5拖放API的應(yīng)用 5.3.1DragEvent事件 拖放元素時的一系列動作會觸發(fā)相關(guān)元素的拖放事件DragEvent，該事件繼承于鼠標(biāo)事件MouseEvent。DragEvent包含的常用事件類型如表5-2所示。表5-SEQ表2-\*ARABIC2DragEvent的常用事件一覽表事件名稱存儲模式事件目標(biāo)解釋ondragstart讀寫模式該事件由被拖拽的元素觸發(fā)。當(dāng)用戶剛開始拖動元素時觸發(fā)該事件。ondrag保護(hù)模式該事件由被拖拽的元素觸發(fā)。當(dāng)元素處于被拖動狀態(tài)時觸發(fā)該事件。ondragenter保護(hù)模式該事件由被拖拽的元素觸發(fā)。當(dāng)被拖動的元素進(jìn)入到可以被放置下來的有效區(qū)域的瞬間觸發(fā)該事件。ondragleave保護(hù)模式該事件由被拖拽的元素觸發(fā)。當(dāng)被拖動的元素離開了可以被放置下來的有效區(qū)域的瞬間觸發(fā)該事件。ondragover保護(hù)模式該事件由目標(biāo)區(qū)域元素觸發(fā)。當(dāng)被拖動的元素處于可以被放置下來的有效區(qū)域內(nèi)時，該事件會不停地被觸發(fā)。該事件狀態(tài)在dragenter之后，在dragleave之前。ondrop只讀模式該事件由目標(biāo)區(qū)域元素觸發(fā)。當(dāng)被拖動的元素被放置在有效的區(qū)域時觸發(fā)該事件。ondragend保護(hù)模式該事件由被拖拽的元素觸發(fā)。當(dāng)拖動操作結(jié)束時激發(fā)該事件。例如，在拖動元素的過程中釋放鼠標(biāo)左鍵或按下鍵盤上的Esc鍵均可觸發(fā)該事件。該事件狀態(tài)在drop之后。其中只有ondragstart事件為讀寫模式，ondrop事件為只讀模式，其余所有事件均為保護(hù)模式狀態(tài)。在讀寫模式下既可以寫入數(shù)據(jù)進(jìn)行傳遞也可以讀取數(shù)據(jù)；在只讀模式下，只允許將數(shù)據(jù)讀取出來，不可以寫入新的數(shù)據(jù)；在保護(hù)模式下，當(dāng)前傳遞的數(shù)據(jù)不可以被修改或讀取。從用戶在元素上點(diǎn)擊鼠標(biāo)左鍵開始拖拽行為，到將該元素放置到指定的目標(biāo)區(qū)域中的整個拖放生命周期觸發(fā)的事件按照順序如下：dragstart->drag->dragenter->dragover->dragleave->drop->dragend5.3.2DataTransfer對象 HTML5拖放API允許在拖放過程中攜帶一項(xiàng)或多項(xiàng)自定義數(shù)據(jù)內(nèi)容。這些數(shù)據(jù)內(nèi)容可以使用拖放事件DragEvent中的datatransfer屬性進(jìn)行添加和處理，該屬性來源于HTML5中的DataTransfer對象，其中包含的每項(xiàng)數(shù)據(jù)均可有獨(dú)立的數(shù)據(jù)類型。DataTransfer對象的常用屬性如表5-3所示。表5-SEQ表2-\*ARABIC3DataTransfer對象的屬性一覽表屬性名稱屬性值解釋dropEffectnonecopymovelink該屬性用于獲取或重置當(dāng)前的拖放類型，共有4種取值。effectAllowednonecopycopyLinkcopyMovelinklinkMovemovealluninitialized提供所有允許的拖放類型。typesDOMString[]該屬性為只讀屬性。返回值為字符串?dāng)?shù)組，包含了所有存入數(shù)據(jù)的類型。itemsDataTransferItemList對象該屬性為只讀屬性。返回值為DataTransferItemList對象，該對象是以列表的形式保存了所有的存入數(shù)據(jù)。filesFileList對象該屬性為只讀屬性。如果拖放的是一個或多個本地文件，該屬性返回值為文件列表對象。如果拖放過程中沒有涉及本地文件，則文件列表為空。 DataTransfer對象的常用方法如表5-4所示。表5-SEQ表2-\*ARABIC4DataTransfer對象的方法一覽表方法名稱解釋getData(format)獲取DataTransfer對象中format格式的數(shù)據(jù)。一般在ondrop事件中使用，獲取傳遞的數(shù)據(jù)內(nèi)容。其中format替換成某種數(shù)據(jù)類型，例如純文本類型為text/plain。setData(format,data)將數(shù)據(jù)設(shè)置為format格式，并保存在DataTransfer對象中進(jìn)行傳遞。一般在ondragstart事件中使用，設(shè)置需要傳遞的數(shù)據(jù)內(nèi)容。clearData([format])清除DataTransfer對象中format格式的數(shù)據(jù)。如果省略參數(shù)則表示清除全部數(shù)據(jù)。setDragImage(image,x,y)設(shè)置拖拽元素時所顯示的自定義圖標(biāo)。其中image為圖片對象，x和y分別指的是圖標(biāo)與鼠標(biāo)在水平和垂直方向上的距離。5.3.3拖放元素過程 在HTML5頁面中實(shí)現(xiàn)拖放的主要過程如下：為需要被拖放的元素添加draggable屬性，使其允許被拖放；在被拖拽元素的ondragstart事件中初始化需要傳遞的數(shù)據(jù)信息；為作為放置區(qū)域的元素設(shè)置ondragover事件，取消默認(rèn)操作；為作為放置區(qū)域的元素設(shè)置ondrop事件，接受并處理傳遞過來的數(shù)據(jù)內(nèi)容；5.3.4自定義拖放圖標(biāo) 使用DataTransfer對象中的setDragImage()方法可以自定義拖拽時顯示的圖標(biāo)。其語法格式如下：setDragImage(image,x,y);其中參數(shù)image表示Image對象，代表圖標(biāo)的來源。參數(shù)x和y分別表示圖標(biāo)與鼠標(biāo)在水平方向和垂直方向上的距離。該方法一般用于ondragstart事件的回調(diào)函數(shù)中，表示從拖動動作開始時更改拖放圖標(biāo)。5.3.5自定義拖放行為DataTransfer對象具有effectAllowed和dropEffect屬性用于規(guī)定拖放行為，當(dāng)對元素進(jìn)行拖放時，共有三種常見效果解釋如下：copy：表示被拖拽的數(shù)據(jù)將從它的初始位置復(fù)制到可放置區(qū)域。move：表示被拖拽的數(shù)據(jù)將從它的初始位置移動到可放置區(qū)域。link：表示被拖拽的數(shù)據(jù)將從它的初始位置鏈接一個快捷方式到可放置區(qū)域。這三種效果根據(jù)組合又可以形成不同的樣式要求，不同的拖放行為對應(yīng)顯示的鼠標(biāo)圖標(biāo)樣式各不相同，具體樣式由瀏覽器和操作系統(tǒng)決定。一般可以在ondragstart事件被觸發(fā)時通過設(shè)置effectAlllowed屬性值來規(guī)定允許進(jìn)行何種操作。例如：ev.dataTransfer.effectAllowed="move";上述代碼表示設(shè)置允許的操作為移動，effectAllowed的屬性值只能在ondragstart事件中進(jìn)行設(shè)置。effectAllowed屬性共有如下9種取值：none：不允許任何操作。copy：只允許復(fù)制操作。copyLink：允許復(fù)制或者鏈接。copyMove：允許復(fù)制或者移動。link：只允許鏈接操作。linkMove：允許鏈接或移動。move：只允許移動操作。all：允許所有(復(fù)制、移動或鏈接)操作。uninitialized：尚未設(shè)置effectAllowed屬性時的默認(rèn)值，等同于all。在拖拽元素的過程中，dropEffect屬性值可以在dragenter或dragover事件中進(jìn)行設(shè)置。dropEffect屬性共有如下4種取值：none：不允許任何操作。copy：該狀態(tài)下被拖拽的元素將復(fù)制一個副本放到指定的放置區(qū)域。move：該狀態(tài)下被拖拽的元素將移動到指定的放置區(qū)域，該屬性值為默認(rèn)值。link：該狀態(tài)下被拖拽的元素與可放置區(qū)域之間將創(chuàng)建連接。dropEffect屬性的取值會受到effectAllowed屬性取值的約束。例如上面示例中設(shè)置effectAllowed屬性值為move時，dropEffect的屬性值也只能設(shè)置為move。effectAllowed與dropEffect屬性取值的具體對應(yīng)關(guān)系如表5-5所示。表5-SEQ表2-\*ARABIC5effectAllowed與dropEffect屬性取值對照表effectAllowed設(shè)置的取值dropEffect允許的取值nonenonecopycopycopyLinkcopy或linkcopyMovecopy或movelinklinklinkMovelink或movemovemoveallcopy、link或move任選其一均可uninitialized并且被拖拽的元素為文本框中的內(nèi)容move或copyuninitialized并且被拖拽對象為普通元素copy或linkuninitialized并且被拖拽對象為帶href屬性的超鏈接元素<a>link或copy 5.3.6本地文件的拖放 除了頁面上自帶的HTML元素外，本地文件也可以使用HTML5拖放API進(jìn)行拖拽并放置到頁面的指定區(qū)域中。傳遞本地文件時無需設(shè)置傳遞的數(shù)據(jù)內(nèi)容，直接在放置文件時使用DataTransfer對象的files屬性即可獲取文件列表，里面包含了所有文件。將本地文件拖放至頁面的指定區(qū)域，使用DataTransfer對象的files屬性將文件相關(guān)信息（例如文件名稱、修改時間、文件大小等內(nèi)容）顯示在頁面上。<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>HTML5拖放API之本地文件拖放</title><style>#fileCheck{width:300px;height:100px;border:1pxdashed;margin:20px;}li{margin:10px;}</style></head><body><h3>HTML5拖放API之本地文件拖放</h3><hr/><divid="fileCheck"ondragover="allowDrop(event)"ondrop="drop(event)">請將文件拖放至此處。</div><divid="status"></div><script>//ondragover事件回調(diào)函數(shù)functionallowDrop(ev){//解禁當(dāng)前元素為可放置被拖拽元素的區(qū)域ev.preventDefault();}//ondrop事件回調(diào)函數(shù)functiondrop(ev){//解禁當(dāng)前元素為可放置被拖拽元素的區(qū)域ev.preventDefault();//獲取拖拽的文件列表varfiles=ev.dataTransfer.files;//用于記錄文件的狀態(tài)，包括文件名、文件大小、修改時間等varfileStatus;//用于獲取單個文件對象varf;//使用for循環(huán)遍歷所有文件for(vari=0;i<files.length;i++){//獲取當(dāng)前文件對象f=files[i];//獲取最近修改文件的日期對象varlastModified=f.lastModifiedDate;//將日期時間顯示為純文本形式varlastModifiedStr=lastModified.toLocaleString();//組合文件相關(guān)信息fileStatus+='<li>文件名稱：'++'<br>文件類型：'+f.type+'<br>文件大小：'+f.size+'字節(jié)<br>修改時間：'+lastModifiedStr+'</li>';}//獲取文件狀態(tài)顯示欄對象varstatus=document.getElementById("status");//更新文件信息至顯示欄中status.innerHTML='<ul>'+fileStatus+'</ul>';}</script></body></html>5.4實(shí)驗(yàn)案例——仿回收站效果的設(shè)計與實(shí)現(xiàn)背景介紹：在Windows等操作系統(tǒng)中均包含回收站功能，用戶可以直接將不需要的文件拖拽并放置到桌面回收站圖標(biāo)上以實(shí)現(xiàn)文件刪除。功能要求：使用HTML5拖放API相關(guān)技術(shù)，在網(wǎng)頁上實(shí)現(xiàn)仿回收站的類似效果。用戶通過拖拽可以將頁面上的元素放置到回收站中刪除。5.5本章小結(jié)HTML5新增拖放API可以用于拖拽和放置所有指定的HTML元素。所有HTML元素均可以被設(shè)置為可拖放狀態(tài)，并且可