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

3.1瀏覽器支持檢測

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

3.2實現簡單拖放

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

拖動效果實現代碼如下：

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

圖3-2拖動后頁面效果

實現拖動的思路是：當光標在圖片上按住鼠標左鍵進行移動時，將被該圖片元素的id存入dataTransfer對象中；當光標移動到目標div元素中放開鼠標左鍵時，將被記錄了id的圖片元素設置為該div元素的子元素。在這個過程中，我們稱被拖動的元素為源元素，拖動的目的地為目的地元素。

同時，目的地元素默認拒絕接收被拖放的元素，我們在頁面拖動元素的過程中，需要通過preventDefault()方法關閉目的地元素默認行為。

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

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

3.3拖放相關的屬性和事件

1.拖放相關的屬性要實現元素的拖放，需要先設置元素的draggable="true"屬性，即將元素設置為可拖放。在上面的例子中并沒有設置這個屬性，因為鏈接和圖片默認是可拖放的，不需要設置draggable屬性。

屬性設置語法如下：

●?true:可以拖動。

●?false:禁止拖動。

●?auto:跟隨瀏覽器定義是否可以拖動。

2.拖放相關的事件

與拖放相關的元素有兩個，在拖放的過程中會分別觸發如表3-1所示的事件。

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

3.4dataTransfer對象

1.?dataTransfer對象的屬性

dataTransfer對象列入標準的屬性有4個，如表3-2所示。

2.?dataTransfer對象的方法

dataTransfer對象列入標準的方法有4個，如表3-3所示。

3.5拖放圖片到瀏覽器

HTML5可以實現從本地拖放文件到瀏覽器中，利用FileReader對象讀取文件，并進行后續操作。此功能一般應用在圖片拖放和文件上傳操作中，將本地圖片拖放并顯示到頁面指定位置或為文件選擇控件提供直接拖放功能。

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

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

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

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

需要注意的是：拖動本地文件到瀏覽器，當瀏覽器支持拖放文件格式時，瀏覽器默認會打開本地文件；當瀏覽器不支持拖放文件格式時，瀏覽器會默認觸發下載器下載該文件。同時，不同瀏覽器打開本地文件的方式有所不同。

●

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

●

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

●

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

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

在ondrop事件中，先阻止元素的默認行為；再通過dataTransfer對象獲取文件列表，因為我們只拖動一個圖片文件，因此可以直接通過下標[0]找到文件，獲取文件類型；然后創建一個img元素和一個FileReader對象；接下來判斷獲取的文件類型是否支持img元素，如果不支持，則給出提示并返回；如果img元素支持文件類型，則使用FileRea