1. 程式人生 > >HTML5拖拽效果

HTML5拖拽效果

drag and drop(拖拽)

拖拽元素事件 : 事件物件為被拖拽元素

dragstart :  拖拽前觸發 
drag :拖拽前、拖拽結束之間,連續觸發
dragend  : 拖拽結束觸發

目標元素事件 : 事件物件為目標元素

dragenter :  進入目標元素觸發,相當於mouseover
dragover : 進入目標、離開目標之間,連續觸發
dragleave :  離開目標元素觸發,相當於mouseout
drop  :  在目標元素上釋放滑鼠觸發

事件的執行順序 :drop不觸發的時候

dragstart  >  drag >  dragenter >  dragover >  dragleave > dragend 

事件的執行順序 :drop觸發的時候(dragover的時候阻止預設事件)

dragstart  >  drag >  dragenter >  dragover >  drop > dragend