H5拖拽刪除文件

在 HTML5 中，拖放是標準的一部分，任何元素都可以拖放。

全局屬性draggable ：標籤設置draggable=true後，就可以被拖拽：

<img src="touxiang.jpg" draggable="true">

單純地給元素加上draggable屬性，也只能在鼠標按住、拖拽、放開時看到特效，它僅僅證實該元素是能夠被拖拽的。

要實現真正的拖拽刪除文件，拖拽上傳文件等等效果，必須結合Drag & Drop API開發。HTML5提供專門的拖拽與拖放的API

舉個栗子

 

在實現網頁拖拽丟棄的特效的話，首先要學習Drag and Drop API提供的1個對象和4個事件

DataTransfer對象用來保存，經過拖放動做，拖動到瀏覽器的數據。

提供setData方法爲一個給定的類型設置數據；getData方法根據指定的類型檢索數據。

 

先來作個小練習，熟悉DataTransfer對象怎麼結合拖拽事件使用

<img id="drag1" src="touxiang.jpg" draggable="true" ondragstart="drag(event)" width="200" height="200">

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

已設置一張圖片爲被拖拽元素，設置被拖數據的數據類型爲「text」、值是被拖拽元素的id-->"drag1"

圖片能夠拖拽了，可是將它安放何處呢？

<div id="div1" ondrop="drop(event)"></div>

 function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}

將id爲div1的元素綁定ondrop事件，使用getData方法獲取剛纔存儲在dataTransfer中的對象，而後將其追加在div中。至此，一個簡單拖拽效果就完成啦！

可是，當你複製以上兩段代碼打開瀏覽器運行時，發現並無什麼luan用~~~看看上面總結了4個事件的用法，剛纔的代碼中只用到2個，呵~就知道事情沒這麼簡單。

ondragover 事件默認地沒法將數據/元素放置到其餘元素中。若是須要設置容許放置，咱們必須阻止對元素的默認處理方式。

此時，須要在div1上再綁定ondragover事件

function allowDrop(ev) {
    ev.preventDefault(); //阻止瀏覽器默認行爲
}

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

如何使用H5+Darg and Drop API開發完成拖拽效果已經學會了，如今來完成剛纔舉的栗子吧：

奉上完整代碼：

……省略HTML……
//定義變量
var eleDustbin = document.getElementById('dustbin'),//垃圾桶
    eleDrags = document.getElementsByClassName('draglist'),//待丟棄垃圾
    eleRemind = document.getElementById('dragremind'),//提示語
    eleDrag = null;
for (var i=0; i<eleDrags.length; i++) {
    //拖拽開始
    eleDrags[i].ondragstart = function(ev) {
        ev.dataTransfer.setData("text", ev.target.id);
        eleDrag = ev.target;
        //return true;
    };
    //拖拽結束
    eleDrags[i].ondragend = function(ev) {
        ev.dataTransfer.clearData("text");
        eleDrag = null;
        //return false
    };
}
//拖拽元素在目標元素頭上移動的時候
eleDustbin.ondragover = function(ev) {
    ev.preventDefault();
    //return true;
};
//拖拽元素進入目標元素頭上，同時鼠標鬆開的時候
eleDustbin.ondrop = function(ev) {
    if (eleDrag) {
        eleRemind.innerHTML += '<b>"' + eleDrag.childNodes[0].alt+ '"</b>被扔進了垃圾箱<br/>';
        eleDrag.parentNode.removeChild(eleDrag);
    }
    return false;   //避免觸發瀏覽器自帶的事件
};

過去在網頁中基本上都是使用DOM事件模型中的mousedown、mousemove、mouseup監聽來模擬拖拽效果，

這種方式存在代碼冗長，性能低下等問題，由於不停地修改元素位置會致使頁面reflow。