html 拖放(drag and drop)介面使應用程式能夠在瀏覽器中使用拖放功能。
一、拖拽事件
1、drag:當拖動元素或選中的文字時觸發。
2、dragend:當拖拽操作結束時觸發
3、dragenter:當拖動元素或選中的文字到乙個可釋放目標時觸發
4、dragexit:當元素變得不再是拖動操作的選中目標時觸發
5、dragle**e:當拖動元素或選中的文字離開乙個可釋放目標時觸發
6、dragover:當元素或選中的文字被拖到乙個可釋放目標上時觸發(每100毫秒觸發一次)
7、dragstart:當使用者開始拖動乙個元素或選中的文字時觸發
8、drop:當元素或選中的文字在可釋放目標上被釋放時觸發
二、拖拽介面
dragevent:是乙個表示拖、放互動的乙個dom event介面,它有乙個建構函式和乙個datatransfer屬性,datatransfer 屬性是乙個datatransfer 物件。
datatransfer物件包含了拖拽事件的狀態,例如拖動事件的型別(如拷貝copy
或者移動move
),拖動的資料(乙個或者多個項)和每個拖動項的型別(mime型別)。 datatransfer物件也有向拖動資料中新增或刪除專案的方法。
三、vue中**實現
v-for="(item, index) in list":key="item"class="item":draggable="true"@dragstart="dragstart($event, index)"@dragover="allowdrop"@drop="drop($event, index, list)">}
HTML5實現拖放
拖放 drag 和 drop 是 html5 標準的組成部分。拖放是一種常見的特性,即抓取物件以後拖到另乙個位置。在 html5 中,拖放是標準的一部分,任何元素都能夠拖放。internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。注釋...
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...