JS實現簡易的圖片拖拽排序執行個體代碼，js拖拽排序執行個體

JS實現簡易的圖片拖拽排序執行個體代碼，js拖拽排序執行個體

由HTML5的拖放API，實現的簡易圖片拖放效果。

一、HTML5拖放API的知識點

首先我們得知道元素怎麼才可以被拖放，需要設定它們的draggable屬性，其中img和a標籤的dragable屬性預設是true，不需要我們手動設定。

拖放API的監聽事件如下:

1. dragstart: 來源物件拖拽開始；
2. drag: 來源物件拖拽的過程中；
3. dragend: 來源物件拖拽結束；
4. dragenter: 進入過程對象地區;
5. dragover: 在過程對象地區內移動；
6. dragleave: 離開過程對象地區；
7. drop: 來源物件拖放到目的地區域。

對於這幾個事件，我們要結合需求利用preventDefault()取消它的預設行為。

在拖放事件中，提供dataTransfer用於在來源物件與目標對象之間傳遞資料，dataTransfer一般通過e.dataTransfer調用，dataTransfer的方法如下：

1. setData(format, data)
2. getData(format)；
3. clearData()。

以上是一些基礎知識，與其聽我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]));  }

其實如果你充分利用幾個階段的事件，做出的效果會更精緻。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。