uni-app+sortable.js はドラッグ アンド ドロップの並べ替えをどのように実装しますか?ステップ共有

Uni-App でドラッグ アンド ドロップの並べ替えを実装するにはどうすればよいですか?以下の記事では、sortable.jsを使ってuni-appでドラッグ＆ドロップソートを実装する方法を紹介しますので、ご参考になれば幸いです。

ユニアプリのドラッグ アンド ドロップによる並べ替え

序文

これを作成しますページ上には文字ソート機能があり、手動でドラッグしてソート位置を変更できます。検索した結果、このドラッグ アンド ドロップ機能を実装するために使用できる

sortable.js を見つけました。

感想

sortable.jsの公式ドキュメントを見ていると、 onUpdate 内の イベントでは、ドラッグして位置を変更した後、戻り値に開始インデックス値と変更後のインデックス値が含まれており、これにより配列の内容を変更して、ドラッグ後に位置を変更する機能を実現できます。 。

#手順

インストールsortable.js#

npm install sortablejs --save-dev

ノードの取得

ここで取得したノードは、リストにドラッグする必要がある親ノードです

let uls = document.getElementById('list')

ノードの読み込み

 new Sortable(uls,{})

TriggeronUpdate<span style="font-size: 18px;"></span>Eventというのも、その過程で次のことが分かりました。 domノードの位置を利用して操作すると項目の順序を変更する際にバグが発生するので情報を探した結果、

VueのSortable

を使用することで問題を発見しました。項目の順序に従って、最初に対応するノードを変更する必要があります。

ノードの変更

最初に移動したノードを削除してから、移動したノードを元のノードに挿入します

newLi = uls.children[newIndex],  //移动节点
oldLi = uls.children[oldIndex];  //原有节点
uls.removeChild(newLi) // 删除移动的节点
uls.insertBefore(newLi, oldLi) // 将移动节点插入到原有节点中

注: ドラッグするときから変更するときは上下に移動すると、ノードが 1 つ追加されるため、元のインデックス値は 1 つ減ります。

newIndex < oldIndex

の場合、oldLi ノードの次のノードが使用されます。 <pre class="brush:js;toolbar:false;">uls.insertBefore(newLi, oldLi.nextSibling)</pre>

配列を変更します

元の配列を削除してデータを保存します

let item = _this.items.splice(oldIndex, 1)

残りの配列インデックス値にデータを追加します

_this.items.splice(newIndex, 0, item[0])

完全なコード

let uls = document.getElementById('list')
    new Sortable(uls, {
      onUpdate: function (event) {
        //获得基础数据
        let newIndex = event.newIndex,
          oldIndex = event.oldIndex,
          newLi = uls.children[newIndex],
          oldLi = uls.children[oldIndex];
        // 删除原有节点
        uls.removeChild(newLi)
        // 将移动的节点插入原有节点中
        if (newIndex > oldIndex) {
          uls.insertBefore(newLi, oldLi)
        } else {
          uls.insertBefore(newLi, oldLi.nextSibling)
        }
        // 修改数组
        let item = _this.items.splice(oldIndex, 1)
        _this.items.splice(newIndex, 0, item[0])
      },

推奨: 「

uniappチュートリアル

」

以上がuni-app+sortable.js はドラッグ アンド ドロップの並べ替えをどのように実装しますか?ステップ共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。