HTML5實現拖放

2021-06-19 23:28:45 字數 973 閱讀 4255

拖放(drag 和 drop)是 html5 標準的組成部分。

拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。

在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。

internet explorer 9、firefox、opera 12、chrome 以及 safari 5 支援拖放。

注釋:在 safari 5.1.2 中不支援拖放。

下面的例子是乙個簡單的拖放例項:

οndragstart="drag(event)" width="336" height="69" //>

親自試一試

它看上去也許有些複雜,不過我們可以分別研究拖放事件的不同部分。

首先,為了使元素可拖動,把 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學習之 HTML 5 拖放

拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...

HTML5 原聲拖放

最早在網頁中引入js拖放功能的是ie4,並且只可以拖放影象和某些文字。ie5.5以後網頁中的任何元素都可以進行拖放。html5以ie為例項制定了拖放規範。firefox3.5 safari3 和chrome也根據html5規範實現了原聲拖放功能。拖動某元素時,將依次觸發下列事件 1 dragstar...

vue利用html5拖放實現拖拽

html 拖放 drag and drop 介面使應用程式能夠在瀏覽器中使用拖放功能。一 拖拽事件 1 drag 當拖動元素或選中的文字時觸發。2 dragend 當拖拽操作結束時觸發 3 dragenter 當拖動元素或選中的文字到乙個可釋放目標時觸發 4 dragexit 當元素變得不再是拖動操...