xyz軟件補給站的部落格

Lynda.com 出品的時長1小時的 深入學習HTML5的拖放功能 視頻教程。由Bill Weinman演示了

JavaScript和HTML5的聯合運用，使幾乎所有的網頁元素都可以拖動，並且能夠增強瀏覽器的支

援而不再需要外部數據庫(比如jQuery)的技術。內容包括檢測用戶瀏覽器的拖放支援，編寫一個

簡單事件監聽程式，使用拖放區。舉例一個簡單運作的遊戲，實踐能夠適用於幾乎任何網站上拖

放功能的執行。本教程附帶練習文件。

英文說明:



In HTML5: Drag and Drop in Depth, Bill Weinman shows how to make

just about any web page element draggable with a combination of

JavaScript and HTML5, a technique that has increased browser

support and that eliminates the need for external libraries such

as jQuery. The course covers how to detect drag-and-drop support

in the user's browser, code a simple event listener, use a drop

zone, and even receive dropped objects without a drop zone. A

simple working example game, a practical implementation of drag-

and-drop that can be applied to almost any web site, is also

demonstrated. Exercise files are included with the course.





Topics include:



* Exploring the HTML/Javascript/CSS/DOM relationship

* Detecting drag and drop support

* Using the HTML5 draggable and dropzone attributes

and onDragStart event

* Exploring different events

* Receiving drops with or without a drop zone

* Creating a simple game