HTML5 實(shí)現(xiàn)拖放API的過(guò)程

    在HTML5中，要想實(shí)現(xiàn)拖放操作，至少需要經(jīng)過(guò)如下兩個(gè)步驟。

  1.把要拖放的對(duì)象元素的draggable屬性設(shè)置為true(draggable="true"),這樣才能拖放該元素，

代碼實(shí)例如下：

    <div draggable="true">可以對(duì)我進(jìn)行拖拽!</div>

    另外，img元素與a元素（必須制定href)默認(rèn)允許拖放。

  2.編寫(xiě)與拖放有關(guān)的事件處理代碼。

    下面是與拖放有關(guān)的幾個(gè)主要事件：

    ?ondtagstart事件: 當(dāng)拖拽元素開(kāi)始被拖拽時(shí)觸發(fā)的事件，此事件作用在被拖拽的元素上。

    ?ondragenter事件：當(dāng)拖拽元素進(jìn)入目標(biāo)元素時(shí)觸發(fā)的事件，此事件用在目標(biāo)兀素上。

    ?ondragover事件：當(dāng)拖拽元素在目標(biāo)元素上移動(dòng)時(shí)觸發(fā)的事件，此事件用在目標(biāo)元素上。

    ?ondrop事件：當(dāng)被拖拽元素在目標(biāo)上同時(shí)松開(kāi)鼠標(biāo)時(shí)觸發(fā)的事件，此事件作用在目標(biāo)元素上。

    ?ondragend事件：當(dāng)拖拽完成后觸發(fā)的事件，此事件作用在被拖拽的兀素上。