H5的拖放事件 拖拽刪除

2022-09-17 12:54:12 字數 1395 閱讀 9766

今天我們來介紹一下h5的拖放事件:

拖放事件

h5的拖放事件提供了多個介面:

1、drag:當元素或者選中的文字被拖動時觸發(每幾百毫秒觸發一次),應用在被拖拽元素上

2、dragend:當拖動操作結束時觸發(通過釋放滑鼠按鈕或者點選轉義鍵),應用在被拖拽元素上

3、dragenter:當乙個被拖動的元素或者選中的文字進入乙個有效的放置目標時觸發,應用在目標元素上

4、dragexit:當元素不再是拖動操作的直接選擇元素時觸發(很少使用)

5、dragle**e:當拖動元素或者選中的文字離開有效的放置區域時觸發,應用在目標元素上

6、dragover:當元素或者選中的文字被拖動到有效放置區域上方時觸發(每幾百毫秒觸發一次),應用在目標元素上

7、dragstart:當使用者開始拖動元素或者拖動選中文字時觸發,應用在被拖拽元素上

8、drop:當元素或選中的文字在有效區域放置時觸發,應用在目標元素上。

event.datatransfer

在進行拖放操作時,datatransfer 物件用來儲存被拖動的資料。它可以儲存一項或多項資料、一種或者多種資料型別

這個物件在所有的拖動事件屬性datatransfer 都是可用的,但是不能單獨建立。

datatransfer方法(比較多,簡單羅列幾個)

setdata()

將指定格式的資料賦值給datatransfer物件,引數format定義資料的格式也就是資料的型別,data為待賦值的資料,有點像jquery裡面的data

如果指定的資料型別不存在,它將新增到的末尾,這樣型別列表中的最後乙個專案將是新的格式。如果已經存在的資料型別,替換相同的位置的現有資料。就是,當更換相同型別的資料時,不會更改型別列表的順序。

getdata(format)

從datatransfer物件中獲取指定格式的資料,format代表資料格式,如果給定型別的資料不存在或者資料轉存(data transfer)沒有包涵資料,方法將返回乙個空字串。

這個資料將僅僅在放置動作發生時在drop時間中是可用的。

下面是個例項,拖拽元素進行刪除:

css**:

* ul

li div

html**:

垃圾箱js**:

function drag(event)

function dend(event)

//拖拽進入標籤範圍

function enter(event)

function le**e(event)

function drop(event)

function over(event) {

event.preventdefault();

H5中拖放效果

附上 首先,為了使元素可拖動,把 draggable 屬性設定為 true 然後,規定當元素被拖動時,會發生什麼。在上面的例子中,ondragstart 屬性呼叫了乙個函式,drag event 它規定了被拖動的資料。datatransfer.setdata 方法設定被拖資料的資料型別和值 func...

vue通過h5拖拽實現假拖拽效果

1.h5的拖拽瀏覽器的支援 internet explorer 9 firefox opera 12 chrome 以及 safari 5 支援拖放。在 safari 5.1.2 中不支援拖放。1.設定標籤可以拖拽屬性 draggable true 2.拖拽順序 3.在拖拽事件中遇到目標元素ondr...

H5拖拽事件 自定義建立a標籤熱區

每次新增,遍歷每個節點掛載觸發函式 div01 each i,e h5拖拽封裝 function drag divdrag divdrag.ondrag function divdrag.ondragend function 第三部分,拖拽改變大小 繫結需要拖拽改變大小的元素物件 function ...