ドラッグ アンド ドロップの並べ替えを実装する H5 コード

この記事では、H5 でドラッグ アンド ドロップの並べ替えを実装するためのコードを紹介します。必要な方は参考にしていただければ幸いです。

1. 要件

図に示すように、Douguo レシピ システム、SKU リストはドラッグ アンド ドロップの並べ替えを実装します。

2. HTML5 ドラッグ アンド ドロップ API の知識ポイント

まず最初に、知っておく必要があります。要素をドラッグ アンド ドロップする方法。img タグと a タグのドラッグ可能属性はデフォルトで true なので、手動で設定する必要はありません。

ドラッグ アンド ドロップ API の監視イベントは次のとおりです。

dragstart: ソース オブジェクトのドラッグが開始されます。

dragend: ソース オブジェクトのドラッグが終了します。

dragenter: プロセス オブジェクト領域に入る;

dragover: プロセス オブジェクト領域内を移動する;

dragleave: プロセス オブジェクト領域を離れる;

drop: ソース オブジェクトをターゲット領域にドラッグします。

これらのイベントについては、preventDefault() を使用して、必要に応じてデフォルトの動作をキャンセルする必要があります。

ドラッグアンドドロップイベントでは、ソースオブジェクトとターゲットオブジェクトの間でデータを転送するためにdataTransferが提供されており、dataTransferのメソッドは通常、次のとおりです。

setData(format, data)

getData (フォーマット);

clearData()。

3. HTML 構造:

p.cp-sku-show

scan.border-grey

4. ドラッグアンドドロップの実装アイデア

1. ドラッグ可能な属性

2. ドラッグソースと配置ターゲットのインデックスを決定します。配置ターゲットのインデックスが大きい場合は、ドラッグソースを後方に挿入します。

5. 実装コード

<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 の表示属性の Flex レイアウトの簡単な紹介

CSS でレイアウトを実装するときに使用できるいくつかのテクニック (コード)

以上がドラッグ アンド ドロップの並べ替えを実装する H5 コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。