WeChat アプレットを使用してドラッグ アンド ドロップ並べ替え機能を実装する

WeChat アプレットを使用したドラッグ アンド ドロップ並べ替え機能の実装サンプル コード

WeChat アプレットを初めて学習し始めたとき、私はいつもそれが非常に便利だと思っていました。ドラッグアンドドロップの並べ替え機能を実装するのは困難です。しかし、公式ドキュメントを調べてさまざまなアプローチを試した結果、最終的にこの機能を実装することができました。この記事では、ドラッグ アンド ドロップの並べ替え機能を実装する具体的なコード例を紹介します。

まず、ソート可能なすべての項目のリストを wxml ファイル内に作成します。例:

<view class="sortable-list">
  <view wx:for="{{items}}" wx:key="unique-key" wx:for-item="item" wx:for-index="index" class="sortable-item"
    data-index="{{index}}" bindtouchstart="onDragStart" bindtouchmove="onDragging" bindtouchend="onDragEnd"
    bindtouchcancel="onDragEnd">
    {{item}}
  </view>
</view>

スタイル ファイル wxss では、並べ替え可能な項目にいくつかのスタイルを追加して、ドラッグ可能にする必要があります。例:

.sortable-item {
  padding: 10rpx;
  background-color: #F7F7F7;
  margin-bottom: 10rpx;
  border: 1rpx solid #CCCCCC;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.sortable-item.dragging {
  opacity: 0.6;
  -webkit-transform: scale(0.95);
  transform: scale(0.95);
  z-index: 999;
  border-color: #33CCFF;
}

対応する js ファイルで、ドラッグ アンド ドロップの並べ替えを実装するためにいくつかのイベント処理関数を定義する必要があります。まず、ページのデータ フィールドで並べ替えられたリスト項目とインデックス値 draggingIndex を定義する必要があります:

Page({
  data: {
    items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
    draggingIndex: -1
  },
  // ...
});

次に、ドラッグ開始、ドラッグ プロセス、およびドラッグ終了イベント ハンドラー関数を実装する必要があります:

Page({
  data: {
    // ...
  },
  onDragStart(e) {
    this.setData({
      draggingIndex: e.currentTarget.dataset.index
    });
  },
  onDragging(e) {
    const index = e.currentTarget.dataset.index;
    const draggingIndex = this.data.draggingIndex;

    if (draggingIndex !== -1) {
      const items = this.data.items;
      const [item] = items.splice(draggingIndex, 1);
      items.splice(index, 0, item);

      this.setData({
        items
      });
      this.setData({
        draggingIndex: index
      });
    }
  },
  onDragEnd(e) {
    this.setData({
      draggingIndex: -1
    });
  }
});

ドラッグ開始イベント ハンドラー onDragStart で、現在のドラッグ アイテムのインデックス値を取得し、それをデータの draggingIndex フィールドに保存します。

ドラッグ プロセス イベント ハンドラー onDragging では、ドラッグ中のアイテムを元の位置から削除し、現在のドラッグ位置に挿入します。最後に、変更したリストをデータに保存し、現在のドラッグ項目のインデックス値を更新します。

ドラッグ終了イベント ハンドラー onDragEnd で、データの draggingIndex フィールドを -1 にリセットし、ドラッグ プロセスの終了を示します。

上記は、WeChat アプレットのドラッグ アンド ドロップによる並べ替え機能を実装するための完全なコード例です。このコードを実行すると、ミニ プログラムにドラッグ アンド ドロップによる並べ替え機能を実装できます。このコード例がお役に立てば幸いです。ご質問がございましたら、お気軽にお問い合わせください。

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