由HTML5的拖放API，實現的簡易圖片拖放效果。
一、HTML5拖放API的知識點
首先我們得知道元素怎么才可以被拖放，需要設置它們的draggable屬性，其中img和a標簽的dragable屬性默認是true，不需要我們手動設置。
拖放API的監聽事件如下:
對于這幾個事件，我們要結合需求利用preventDefault()取消它的默認行為。
在拖放事件中，提供dataTransfer用于在源對象與目標對象之間傳遞數據，dataTransfer一般通過e.dataTransfer調用，dataTransfer的方法如下：
以上是一些基礎知識，與其聽我BB，不如去打開MDN,再敲幾行代碼豈不是美滋滋。
二、簡易的圖片拖拽排序。
先放效果圖吧：
首先看看我們的dom結構
<!-- 部分標簽 --> div#drag-wrap div(class="item" id="wrap1") img(id="img1") ... ...
我們需要監聽的事件:
const dragCon = document.getElementById('drag-wrap'); dragCon.addEventListener('dragstart', startDrag, false); /** * 這里一定要阻止dragover的默認行為，不然觸發不了drop */ dragCon.addEventListener('dragover', function (e) { e.preventDefault(); }, false); dragCon.addEventListener('drop', exchangeElement, false);在dragstart事件中，我們需要記住需要交換的子元素和父元素：
function startDrag(e) { e.dataTransfer.setData('Text', e.target.id + ';' + e.target.parentElement.id); }最重要的就是在drop事件中處理我們交換元素的邏輯和一些邊緣條件的判斷。
function exchangeElement(e) { e.preventDefault(); const el = e.target; let PE, //要插入位置的父元素 CE; //需要交換的元素 if (el.tagName.toLowerCase() !== 'div') { PE = el.parentElement; CE = el; } else { PE = el; CE = el.querySelector('img'); } /** * 判斷不在控制范圍內 */ if (!PE.classList.contains('item')) { return; } const data = e.dataTransfer.getData('Text').split(';'); //交換元素 document.getElementById(data[1]).appendChild(CE); PE.appendChild(document.getElementById(data[0])); }其實如果你充分利用幾個階段的事件，做出的效果會更精致。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
