《基于新信息技術(shù)的HTML5和CSS3網(wǎng)頁設(shè)計(jì)進(jìn)階教程》課件-第3章

第3章HTML5的拖放3.1瀏覽器支持檢測3.2實(shí)現(xiàn)簡單拖放3.3拖放相關(guān)的屬性和事件3.4dataTransfer對象3.5拖放圖片到瀏覽器

3.1瀏覽器支持檢測

InternetExplorer9、Firefox、Opera12、Chrome以及Safari5支持拖放。我們可以通過以下代碼來測試瀏覽器是否支持HTML5拖放特性。

3.2實(shí)現(xiàn)簡單拖放

例3-1拖動(dòng)前頁面效果如圖3-1所示，頁面中有一個(gè)方框，方框下有一張圖片，將圖片拖動(dòng)放入方框中。圖3-1拖動(dòng)前頁面效果

拖動(dòng)效果實(shí)現(xiàn)代碼如下：

拖放后頁面效果如圖3-2所示。

圖3-2拖動(dòng)后頁面效果

實(shí)現(xiàn)拖動(dòng)的思路是：當(dāng)光標(biāo)在圖片上按住鼠標(biāo)左鍵進(jìn)行移動(dòng)時(shí)，將被該圖片元素的id存入dataTransfer對象中；當(dāng)光標(biāo)移動(dòng)到目標(biāo)div元素中放開鼠標(biāo)左鍵時(shí)，將被記錄了id的圖片元素設(shè)置為該div元素的子元素。在這個(gè)過程中，我們稱被拖動(dòng)的元素為源元素，拖動(dòng)的目的地為目的地元素。

同時(shí)，目的地元素默認(rèn)拒絕接收被拖放的元素，我們在頁面拖動(dòng)元素的過程中，需要通過preventDefault()方法關(guān)閉目的地元素默認(rèn)行為。

在上面的代碼中，首先是題目提供的內(nèi)容：一張圖片和一個(gè)div元素。其代碼如下：

當(dāng)鼠標(biāo)左鍵在目的地元素內(nèi)松開時(shí)，關(guān)閉目的地元素的默認(rèn)行為，再從dataTransfer對象中將保存在其中的id取出來，通過此id找到源元素，再將源元素設(shè)置為目的地元素的子元素。編寫以下JavaScript代碼，綁定到目的地元素的ondrop事件。

3.3拖放相關(guān)的屬性和事件

1.拖放相關(guān)的屬性要實(shí)現(xiàn)元素的拖放，需要先設(shè)置元素的draggable="true"屬性，即將元素設(shè)置為可拖放。在上面的例子中并沒有設(shè)置這個(gè)屬性，因?yàn)殒溄雍蛨D片默認(rèn)是可拖放的，不需要設(shè)置draggable屬性。

屬性設(shè)置語法如下：

●?true:可以拖動(dòng)。

●?false:禁止拖動(dòng)。

●?auto:跟隨瀏覽器定義是否可以拖動(dòng)。

2.拖放相關(guān)的事件

與拖放相關(guān)的元素有兩個(gè)，在拖放的過程中會(huì)分別觸發(fā)如表3-1所示的事件。

ondragenter、ondragover和ondrop事件的默認(rèn)行為是拒絕接收任何被拖放的元素，因此，我們必須阻止瀏覽器這種默認(rèn)行為。通過event.preventDefault()方法可以阻止瀏覽器默認(rèn)行為(對于火狐瀏覽器，需要使用event.stopPropagation()方法阻止瀏覽器默認(rèn)行為)。

3.4dataTransfer對象

1.?dataTransfer對象的屬性

dataTransfer對象列入標(biāo)準(zhǔn)的屬性有4個(gè)，如表3-2所示。

2.?dataTransfer對象的方法

dataTransfer對象列入標(biāo)準(zhǔn)的方法有4個(gè)，如表3-3所示。

3.5拖放圖片到瀏覽器

HTML5可以實(shí)現(xiàn)從本地拖放文件到瀏覽器中，利用FileReader對象讀取文件，并進(jìn)行后續(xù)操作。此功能一般應(yīng)用在圖片拖放和文件上傳操作中，將本地圖片拖放并顯示到頁面指定位置或?yàn)槲募x擇控件提供直接拖放功能。

例3-2拖動(dòng)本地圖片放入頁面指定的位置。

拖放圖片到瀏覽器的代碼如下：

拖入圖片前頁面顯示效果如圖3-3所示，拖入圖片后頁面顯示效果如圖3-4所示。

圖3-3拖入圖片前頁面顯示圖3-4拖入圖片后頁面顯示

需要注意的是：拖動(dòng)本地文件到瀏覽器，當(dāng)瀏覽器支持拖放文件格式時(shí)，瀏覽器默認(rèn)會(huì)打開本地文件；當(dāng)瀏覽器不支持拖放文件格式時(shí)，瀏覽器會(huì)默認(rèn)觸發(fā)下載器下載該文件。同時(shí)，不同瀏覽器打開本地文件的方式有所不同。

●

Chrome：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會(huì)在當(dāng)前窗口打開文件的預(yù)覽。

●

FireFox：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會(huì)在新窗口打開文件的預(yù)覽。

●

IE：如果該文件是瀏覽器可瀏覽文件(圖片等)，瀏覽器會(huì)在當(dāng)前窗口打開文件的預(yù)覽。

要阻止瀏覽器的默認(rèn)行為，直接為目的地元素添加事件的方法是不行的，只能通過JavaScript在頁面加載完成后為目的地元素追加相應(yīng)方法。關(guān)鍵代碼如下：

在ondrop事件中，先阻止元素的默認(rèn)行為；再通過dataTransfer對象獲取文件列表，因?yàn)槲覀冎煌蟿?dòng)一個(gè)圖片文件，因此可以直接通過下標(biāo)[0]找到文件，獲取文件類型；然后創(chuàng)建一個(gè)img元素和一個(gè)FileReader對象；接下來判斷獲取的文件類型是否支持img元素，如果不支持，則給出提示并返回；如果img元素支持文件類型，則使用FileRea