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

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

一、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,再敲幾行程式碼豈不是美滋滋。

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

  先放效果圖吧：

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

---

  喜歡本文的小夥伴們,歡迎關注我的訂閱號超愛敲程式碼,檢視更多內容.