uniappにドラッグ＆ドロップの並べ替え機能を実装する方法

uniapp でドラッグ アンド ドロップの並べ替え機能を実装する方法

ドラッグ アンド ドロップの並べ替えは、ユーザーが要素をドラッグすることで要素の順序を変更できる一般的なユーザー インタラクション方法です。 uniapp では、コンポーネント ライブラリといくつかの基本的なドラッグ イベントを使用して、ドラッグ アンド ドロップの並べ替え機能を実装できます。以下では、uniappにドラッグ＆ドロップの並べ替え機能を実装する方法を、コード例とともに詳しく紹介します。

ステップ 1: 基本的なリスト ページを作成する

まず、並べ替える必要がある要素を表示するための基本的なリスト ページを作成する必要があります。 <view> タグを使用してリストを作成でき、各リスト項目は <view> または <div> で表すことができます。鬼ごっこ。 <view> タグに、ドラッグ プロセス中の対話ロジックを処理する @touchstart イベントと @touchmove イベントを追加します。

コード例:

<template>
  <view class="list">
    <view class="item" v-for="(item, index) in list" :key="item.id"
      @touchstart="handleTouchStart(index)" @touchmove="handleTouchMove(index)">
      {{ item.name }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '元素1' },
        { id: 2, name: '元素2' },
        { id: 3, name: '元素3' },
        { id: 4, name: '元素4' },
        { id: 5, name: '元素5' },
      ],
      startX: 0,
      startY: 0,
      currentIndex: -1,
    }
  },
  methods: {
    handleTouchStart(index) {
      this.currentIndex = index
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    handleTouchMove(index) {
      let moveX = event.changedTouches[0].clientX
      let moveY = event.changedTouches[0].clientY
      let offsetX = moveX - this.startX
      let offsetY = moveY - this.startY

      // 拖拽过程中可以根据 offsetX 和 offsetY 实现一些交互效果，例如改变元素的位置、颜色等
    },
  },
}
</script>

<style>
.item {
  width: 100%;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}
</style>

ステップ 2: ドラッグ並べ替えロジックの処理

handleTouchMove メソッドでは、ドラッグ変位に基づいて実装できます。要素の交換。まず、現在ドラッグされている要素のインデックスとターゲット位置の要素のインデックスを計算します。次に、リスト内での位置を交換し、リスト データを更新します。最後に、currentIndex を -1 に設定し、ドラッグの終了を示します。

コード例:

methods: {
  handleTouchMove(index) {
    let moveX = event.changedTouches[0].clientX
    let moveY = event.changedTouches[0].clientY
    let offsetX = moveX - this.startX
    let offsetY = moveY - this.startY

    // 计算当前拖拽的元素索引和目标位置元素的索引
    let dragIndex = this.currentIndex
    let targetIndex = Math.floor((index * offsetY) / 100)

    // 交换元素的位置
    if (targetIndex >= 0 && targetIndex < this.list.length && targetIndex !== dragIndex) {
      let dragItem = this.list[dragIndex]
      this.list.splice(dragIndex, 1)
      this.list.splice(targetIndex, 0, dragItem)
      this.currentIndex = targetIndex
    }

    // 将 currentIndex 设为 -1，表示拖拽结束
    if (event.type === 'touchend') {
      this.currentIndex = -1
    }
  },
},

ステップ 3: ドラッグ リリース イベントを追加する

ユーザー エクスペリエンスを向上させるために、@touchend イベントを追加することもできます。ドラッグしてリリースするときのロジックを処理するために使用されます。 handleTouchMove メソッドで、イベント タイプが touchend の場合、currentIndex を -1 に設定し、ドラッグの終了を示します。

コード例:

<template>
  <view class="list" @touchend="handleTouchMove(-1)">
    <!-- 列表元素 -->
  </view>
</template>

<script>
// 其他代码
methods: {
  // 其他方法
  handleTouchMove(index) {
    // 其他逻辑

    // 将 currentIndex 设为 -1，表示拖拽结束
    if (event.type === 'touchend') {
      this.currentIndex = -1
    }
  },
},
</script>

要約すると、基本的なドラッグ イベントと位置の交換ロジックを追加することで、uniapp にドラッグ ソート機能を実装できます。ドラッグプロセス中に、実際のニーズに応じてスタイルとインタラクティブ効果を変更し、ユーザーエクスペリエンスを向上させることができます。この記事がドラッグアンドドロップによる並べ替え機能の実装に役立つことを願っています。

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