JS的平凡之路--簡易的圖片拖拽排序

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

1、HTML5拖放API的知識點

  首先咱們得知道元素怎麼才能夠被拖放，須要設置它們的draggable屬性，其中img和a標籤的dragable屬性默認是true，不須要咱們手動設置。

  拖放API的監聽事件以下:

• dragstart: 源對象拖拽開始；
• drag: 源對象拖拽的過程當中；
• dragend: 源對象拖拽結束；
• dragenter: 進入過程對象區域;
• dragover: 在過程對象區域內移動；
• dragleave: 離開過程對象區域；
• drop: 源對象拖放到目標區域。

  對於這幾個事件，咱們要結合需求利用preventDefault()取消它的默認行爲。

  在拖放事件中，提供dataTransfer用於在源對象與目標對象之間傳遞數據，dataTransfer通常經過e.dataTransfer調用，dataTransfer的方法以下：

• setData(format, data)
• getData(format)；
• clearData()。

&esmp; 以上是一些基礎知識，與其聽我BB，不如去打開MDN,再敲幾行代碼豈不是美滋滋。

2、簡易的圖片拖拽排序。

  先放效果圖吧：

  首先看看咱們的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]));
    }
複製代碼

---

  喜歡本文的小夥伴們,歡迎關注個人訂閱號超愛敲代碼,查看更多內容.