H5實現拖拽排序的代碼

本篇文章給大家帶來的內容是關於H5實現拖拽排序的代碼 ，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

一、需求

豆果食譜系統，sku列表實現拖拽排序，

二、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()。

三、html結構：

p.cp-sku-show

span.border-grey

span span span

img

四、拖拽實現思路

1、將要拖拽的span.border-grey的draggable的屬性設定為"true"；

2、判斷拖拽源和放置目標的index，如果放置目標的index大，則將拖拽源向後插入，反之，則將拖拽源向前插入；

五、實現代碼

<span class='border-grey' draggable='true' id='"+num+"' ondragstart='drag(event)' ondragover='allowDrop(event)' ondrop='drop(event)'><span>"+result.skuId+"</span><span>"+result.skuName+"</span><span>" +                        "<img src='"+result.imgUrl+"' width='50' height='50'/></span><i class='cp-input-close iconfont' onclick='deleteSku(this)'>&#xe69a;</i></span>

// 拖動什麼function drag(e){    e.dataTransfer.setData('Text', e.target.id);    // console.log($('.border-grey'))    $('.border-grey').each((index,element) => {        if(element.id === e.target.id){            // 將拖動的元素的index記錄下來，與targetIndex進行比較，判斷是向前插入還是向後插入            COMMON.index.originIndex = index;        }    })    // console.log('originIndex',COMMON.index.originIndex)}// 何處放置function allowDrop(ev){    ev.preventDefault();}// 進行放置function drop(ev){    ev.preventDefault();    /**     * 判斷不在控制範圍內     */    if (ev.target.className != "border-grey" && ev.target.parentElement.className != "border-grey" && ev.target.parentElement.parentElement.className != "border-grey") {        return;    }    var id = "";// 放置目標id    // 如果放置的位置是span.border-grey    if(ev.target.className == "border-grey"){        // 如果放置的位置是span.border-grey元素        id = ev.target.id    }else if(ev.target.parentElement.className == "border-grey"){        // 如果放置的位置是span.border-grey 下的span子項目        id = ev.target.parentElement.id    }else if(ev.target.parentElement.parentElement.className == "border-grey"){        // 如果放置的位置是span.border-grey 下的img子項目        id = ev.target.parentElement.parentElement.id    }    $('.border-grey').each((index,element) => {            if(element.id === id){            // 將放置的元素的index記錄下來，與targetIndex進行比較，判斷是向前插入還是向後插入            COMMON.index.targetIndex = index;        }    })     var data=ev.dataTransfer.getData("Text");     // 放置目標的index大於拖拽元素的index，說明是向後插入，反之亦然    if(COMMON.index.targetIndex > COMMON.index.originIndex){        $("#"+id).after(document.getElementById(data));    }else{        $("#"+id).before(document.getElementById(data));    }}