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

        span span span

img

四、拖曳實現思路

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

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

#五、實作代碼

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

 相關推薦：

當滑鼠滑過圖片時css怎麼實現圖片旋轉後出現不同效果展示？

CSS3中display屬性的Flex佈局的簡單介紹

#css實作佈局時可以用的幾個技巧（程式碼）### ###

以上是H5實作拖曳排序的程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！