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

WBOY
リリース: 2023-11-21 08:44:14
オリジナル
2490 人が閲覧しました

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート