html5學習筆記

2021-08-27 17:29:26 字數 623 閱讀 1627

實現在兩個div中來回拖放

請把拖放到矩形中,再來回拖動

首先,為了使元素可拖動,把 draggable 屬性設定為 true :

然後,規定當元素被拖動時,會發生什麼。

在上面的例子中,ondragstart 屬性呼叫了乙個函式,drag(event),它規定了被拖動的資料。

datatransfer.setdata() 方法設定被拖資料的資料型別和值:

function drag(ev)

在這個例子中,資料型別是 "text",值是可拖動元素的 id ("drag1")。

ondragover 事件規定在何處放置被拖動的資料。

預設地,無法將資料/元素放置到其他元素中。如果需要設定允許放置,我們必須阻止對元素的預設處理方式。

這要通過呼叫 ondragover 事件的 event.preventdefault() 方法:

event.preventdefault()
當放置被拖資料時,會發生 drop 事件。

在上面的例子中,ondrop 屬性呼叫了乙個函式,drop(event):

function drop(ev)

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

html5學習筆記

html5 1 文件宣告dtd 設定文件型別 使得瀏覽器按照標準模式 w3c標準 渲染網頁 否則瀏覽器按照自定義的怪異模式渲染網頁 2 結構標籤 本質上都是div標籤,但是有意義,3 canvas 凡是路徑圖形,開始畫之前要beginpath 畫完要closepath 定義縮寫 the prc wa...