四步處理一個數據或元素的拖放

05-21

四步處理一個數據或元素的拖放

來自專欄 GeekKnow1，首先要做的就是給想要拖放的對象一個可執行拖放的命令

2,搞清楚要拖動的是什麼。需要用到ondragstart和setData（）。

ondragatar屬性調用drag（event），它又規定了被拖動的數據。

用dataTransfer.setData()方法設置被拖動的數據類型和值：

例如：

function drag(ev){

ev.dataTransfer.setData("text",ev.tartget.id);

}

其中，「text」就是數據類型，值是可拖動元素的id（「drag1」）。

3，放置前的懸停效果，用ondragover,其實就是給放置的目標位置進行解禁處理。

ondragover事件規定在何處放置被拖動的數據。

開啟這個是因為瀏覽器默認的是不允許數據或者元素放置到其他元素中的。如果設置允許放置

那麼就必須對元素的默認效果進行阻止。

此時就必須需要ondragover事件的event.preventDefault()方法：

event.preventDefault();

4，最後就是放置事件，用ondrop。

在放置拖放的數據時就會觸發drop事件。

ondrop屬性調用drop（event）函數進行處理：

例如：

function drop(ev){

ev.preventDefault();//阻止默認不允許放置數據情況

var data = ev.dataTransfer.getData("Text");//獲取拖動的數據

ev.target.appendChild(document.getElementById(data));//給指定目標位置添加子元素（即拖動的數據)

}

這樣就完成了一個元素的拖放了。
推薦閱讀：