HTML5 CSS3實作拖放(Drag and Drop)範例_html5教學技巧

本文簡單介紹一下HTML5的拖放實作。
拖放（Drag 和 drop）是 HTML5 標準的組成部分。
瀏覽器支援:Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支援拖放。

被拖曳元素，dragElement :
(1)新增事件：ondragstart
(2)新增屬性：dragable

放置元素，dropElement:
1、新增事件：ondargenter , ondragover , ondragleave , ondragend ,ondrop
和mouser劃入劃出一類的事件很類似，字面也很好理解，不贅述了，下面會用例子來說明。

2、頁上元素間的拖放
下面用個小例子，div間的拖放來展示，各個事件如何被觸發：

複製程式碼

程式碼如下:

系統中選擇的一個或多個文件拖入該div中，files中會儲存拖入文件的信息，然後我們透過file可以得到文件的類型，長度，內容然後實現上傳。

3、setDragImage(image, x, y)用於設定滑鼠移動過程中隨滑鼠一起移動的效果圖。必須在dragstart中設定。

4、types,effectAllowed和dropEffect分別是拖入元素的類型，拖曳過程中滑鼠顯示的樣式，不過通常可以忽略這幾個屬性，一般用不到。