H5實(shí)現(xiàn)拖拽排序的案例

這篇文章將為大家詳細(xì)講解有關(guān)H5實(shí)現(xiàn)拖拽排序的案例，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、需求

豆果食譜系統(tǒng)，sku列表實(shí)現(xiàn)拖拽排序，如圖：

二、HTML5拖放API的知識(shí)點(diǎn)

首先我們得知道元素怎么才可以被拖放，需要設(shè)置它們的draggable屬性，其中img和a標(biāo)簽的dragable屬性默認(rèn)是true，不需要我們手動(dòng)設(shè)置。

拖放API的監(jiān)聽事件如下:

dragstart: 源對(duì)象拖拽開始；

drag: 源對(duì)象拖拽的過程中；

dragend: 源對(duì)象拖拽結(jié)束；

dragenter: 進(jìn)入過程對(duì)象區(qū)域;

dragover: 在過程對(duì)象區(qū)域內(nèi)移動(dòng)；

dragleave: 離開過程對(duì)象區(qū)域；

drop: 源對(duì)象拖放到目標(biāo)區(qū)域。

??對(duì)于這幾個(gè)事件，我們要結(jié)合需求利用preventDefault()取消它的默認(rèn)行為。

??在拖放事件中，提供dataTransfer用于在源對(duì)象與目標(biāo)對(duì)象之間傳遞數(shù)據(jù)，dataTransfer一般通過e.dataTransfer調(diào)

用，dataTransfer的方法如下：

setData(format, data)

getData(format)；

clearData()。

三、html結(jié)構(gòu)：

p.cp-sku-show

span.border-grey

span span span

img

四、拖拽實(shí)現(xiàn)思路

1、將要拖拽的span.border-grey的draggable的屬性設(shè)置為"true"；

2、判斷拖拽源和放置目標(biāo)的index，如果放置目標(biāo)的index大，則將拖拽源向后插入，反之，則將拖拽源向前插入；

五、實(shí)現(xiàn)代碼

<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>

// 拖動(dòng)什么
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){
            // 將拖動(dòng)的元素的index記錄下來，與targetIndex進(jìn)行比較，判斷是向前插入還是向后插入
            COMMON.index.originIndex = index;
        }
    })
    // console.log('originIndex',COMMON.index.originIndex)
}
// 何處放置
function allowDrop(ev){
    ev.preventDefault();
}
// 進(jìn)行放置
function drop(ev){
    ev.preventDefault();
    /**
     * 判斷不在控制范圍內(nèi)
     */
    if (ev.target.className != "border-grey" && ev.target.parentElement.className != "border-grey" && ev.target.parentElement.parentElement.className != "border-grey") {
        return;
    }
    var id = "";// 放置目標(biāo)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進(jìn)行比較，判斷是向前插入還是向后插入
            COMMON.index.targetIndex = index;
        }
    })
 
    var data=ev.dataTransfer.getData("Text");
 
    // 放置目標(biāo)的index大于拖拽元素的index，說明是向后插入，反之亦然
    if(COMMON.index.targetIndex > COMMON.index.originIndex){
        $("#"+id).after(document.getElementById(data));
    }else{
        $("#"+id).before(document.getElementById(data));
    }
}

關(guān)于H5實(shí)現(xiàn)拖拽排序的案例就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。