vue利用html5拖放實現拖拽

2022-09-12 19:39:13 字數 917 閱讀 3527

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...