1. 程式人生 > >H5拖拽事件

H5拖拽事件

H5中拖拽屬性: draggable: auto | true | false

 

拖動事件:

- dragstart 在元素開始被拖動時觸發

- dragend 在拖動操作完成時觸發

- drag 在元素被拖動時觸發

 

釋放區事件:

dragenter 被拖動元素進入到釋放區所佔據得螢幕空間時觸發

dragover 當被拖動元素在釋放區內移動時觸發

dragleave 當被拖動元素沒有放下就離開釋放區時觸發

drop 當被拖動元素在釋放區裡放下時觸發

 

案例: 實現div拖拽到指定區域效果:

效果:

初始效果:

拖拽過程中的效果:

拖拽到釋放去 釋放後的效果:

程式碼: