用HTML5原生實現拖放或排序

原生拖放

拖放是一種很常見的功能，現在這個功能已經成為Html5標準的一部分。通過html5只需要簡單幾行代碼即可實現拖放，比如下面這個例子，你可以將此圖片上下拖放。

示例代碼

<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>

<div class="dragdrop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="dragdrop" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag1" src="/img/ad_ourjs.jpg" draggable="true" ondragstart="drag(event)">
</div></pre> 
 
代碼步驟

第一步： 要讓一個元素可拖放
需要設置 draggable 屬性
<img draggable="true">
 
 
第二步： 拖放什么

在 ondragstart 事件中通過 dataTransfer.setData 設置拖放的元素 
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
 
 
在這種情況下，是通過傳遞被拖放對象的ID來操作的，所以類型是"text"

第三步: 拖放到什么地方
通過 ondragover實現， 通常情況下，元素可能會被拖放到其它地方，當一個容器允許放置時，只需要在ondragover事件中 preventDefault 即可
function allowDrop(ev) {
    ev.preventDefault();
}
 
 
第四步： 放置

在drop事件中將對象"轉移"到容器中 
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
 
 
這里通過appendChild實現轉移拖放對象，同理可通過放置在不同位置實現排序。 

相關事件
在拖放對象上觸發的事件 
ondragstart - 當用戶開始拖放時
ondrag - 當用戶正在拖放時
ondragend - 當用戶拖放結束時
在放置對象（容器）上觸發的事件
ondragenter - 當拖放對象進入容器時（首次）
ondragover - 當拖放對象經過容器時
ondragleave - 當拖放對象離開窗口時
ondrop - 當拖放對象釋放到容器中時
DataTransfer
 標準屬性 
DataTransfer.dropEffect 拖放的操作類型： copy、move、link 或 none （復制、移動創建鏈接等）
DataTransfer.effectAllowed 播放允許的類型： 比如有些容器只能復制，有些只允許移動等
DataTransfer.files 存放一些拖放的本地文件，如果沒有拖放文件，則此列表為空
DataTransfer.items 只讀 DataTransferItemList 對象
DataTransfer.types 只讀 dragstart事件中指定的拖放類型
 標準方法 
DataTransfer.clearData() 清除指定類型的拖放數據
DataTransfer.getData() 獲取指定類型的數據
DataTransfer.setData() 設置指定類型的數據
DataTransfer.setDragImage() 設置拖放時的自定義圖標
支持： IE9及以上
參考：
 http://www.w3schools.com/html/html5_draganddrop.asp 
 http://www.w3schools.com/jsref/event_ondragstart.asp 
 https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer 
 </div>