WeChatアプレットの並べ替えリストのコード例をドラッグします。

ドラッグ＆ドロップリスト

考え方
界面は二層に分かれています。

下の階には、通常のリストが表示されています。ドラッグする時は処理しません。

最上階、movable-viewコンポーネント、長く押して展示しないで、その後長く押してやっと展示して、しかもイベントをクリックしていません。

イベント
主要傍受：longpress、touchmove、touchendの3つのイベント
longpress
保障長は有効で、他の多くの値を設定します。
touchmove
スライド時トリガ

は、スライドページが必要かどうかを判断します。movable-areaコンポーネントのスライドイベントがcatchによって外れて、スライドできないからです。

は、スライドの経過項目を記録し、ページの「下の階」には他のパターンが設定されています。

タッチパッド
スライド終了時にトリガ
ターゲットノードインデックスを取得し、最初のドラッグノードをターゲットノードに移動します。ここでのキーコードは以下の通りです。

list.splice(futureIndex, 0, list.splice(dragElementIndex, 1)[0]); //     

（この行のコードはVue.Draggableの行のコードを参照しています）
他の設定を空にする
コード
コードセグメント
符号雲倉庫はstarを歓迎して、問題を持ちます。靴
例

//     
  stratBtn(e){
    let index = http.dataIndex(e)[0];//         
    let busArr = this.data.busArr;//          
    let pageY = Number(e.touches[0].pageY);//     Y   
    let busActObj = busArr[index];//           
    this.setData({ //    
      sPageY:pageY,
      mPageY:pageY,
      moveSortBox:true,
      clickIndex:index,
      busActObj:busActObj
    })
  },
  //     
  moveBtn(e){
    let pageY = Number(e.touches[0].pageY); //        
    this.setData({ //  
      mPageY:pageY,
      moveSortBox:true,
    })
  },
  //     
  endBtn(e){
    let sPageY = Number(this.data.sPageY); //        
    let busArr = this.data.busArr; //    
    let pageY = Number(e.changedTouches[0].pageY);//        
    let clickIndex = Number(this.data.clickIndex); //      
    let busActObj = this.data.busActObj;//            
    let position = parseInt((pageY-sPageY)/90)+(clickIndex+1); //        90px (   -   /    )+(      +1)         
    busArr.splice(clickIndex,1);//      
    busArr.splice(position,0,busActObj);//          
    this.setData({//  
      moveSortBox:false,
      busArr:busArr
    })
  },

参照リンク
[1]Sortable JS Vue.Draggable
[2]Sortable JS Sortable
［3］Sortable JSプレゼンテーション例Vue.Draggable
[4]もっと太りたいです。10斤25行のコード解決プログラムのドラッグ＆ドロップ順序
ここでは、WeChatウィジェットの並べ替えリストの例コードについての記事を紹介します。詳細に関連するWeChatウィジェットの並べ替えリストの内容は以前の記事を検索したり、下記の関連記事を引き続き閲覧したりしてください。これからもよろしくお願いします。