HTML5 實現(xiàn)拖放API的過程
在HTML5中,要想實現(xiàn)拖放操作,至少需要經(jīng)過如下兩個步驟。
1.把要拖放的對象元素的draggable屬性設(shè)置為true(draggable="true"),這樣才能拖放該元素,
代碼實例如下:
<div draggable="true">可以對我進行拖拽!</div>
另外,img元素與a元素(必須制定href)默認允許拖放。
2.編寫與拖放有關(guān)的事件處理代碼。
下面是與拖放有關(guān)的幾個主要事件:
?ondtagstart事件: 當(dāng)拖拽元素開始被拖拽時觸發(fā)的事件,此事件作用在被拖拽的元素上。
?ondragenter事件:當(dāng)拖拽元素進入目標(biāo)元素時觸發(fā)的事件,此事件用在目標(biāo)兀素上。
?ondragover事件:當(dāng)拖拽元素在目標(biāo)元素上移動時觸發(fā)的事件,此事件用在目標(biāo)元素上。
?ondrop事件:當(dāng)被拖拽元素在目標(biāo)上同時松開鼠標(biāo)時觸發(fā)的事件,此事件作用在目標(biāo)元素上。
?ondragend事件:當(dāng)拖拽完成后觸發(fā)的事件,此事件作用在被拖拽的兀素上。
點擊加載更多評論>>