vue实现移动端拖动排序

下面我将为您详细讲解“vue实现移动端拖动排序”的完整攻略。

1. 安装vue相关依赖

首先需要安装vue相关依赖，包括vue本身以及vue移动端手势库vue-touch。

npm install vue --save
npm install vue-touch@next --save

2. 引入vue相关依赖

在你的vue项目入口文件中引入vue及vue-touch。

import Vue from 'vue'
import VueTouch from 'vue-touch'

Vue.use(VueTouch)

3. 编写拖动排序组件

下面我们来编写一个拖动排序组件，包括以下内容：

• 一组需要排序的元素
• 拖动元素的位置、样式等控制
• 拖动结束后元素的新位置及状态更新

<template>
  <div>
    <div v-for="(item, index) in list"
         :key="index"
         :ref="`item-${index}`"
         :style="getStyle(item)"
         v-touch:tap="onTap(item)"
         v-touch:pan="onPan(item)"
         v-touch:panend="onPanEnd(item)">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5], // 需要排序的元素列表
      draggingIndex: null, // 正在拖动的元素的索引值
      draggingItem: null, // 正在拖动的元素的实例
      startOffset: { x: 0, y: 0 }, // 开始拖动时的偏移量
      currentPosition: { x: 0, y: 0 }, // 当前拖动时的位置
      newPosition: { x: 0, y: 0 }, // 拖动结束后的新位置
      transition: 'transform 0.2s ease', // 动画过渡效果
    }
  },
  methods: {
    // 获取元素样式
    getStyle(item) {
      const style = {}
      if (this.draggingIndex === item) {
        style.transform = `translate(${this.currentPosition.x - this.startOffset.x}px, ${this.currentPosition.y - this.startOffset.y}px)`
        style.zIndex = 999
        style.transition = this.transition
      }
      return style
    },
    // 手指点击元素
    onTap(item) {
      this.draggingIndex = item
      this.draggingItem = this.$refs[`item-${item}`][0]
      this.startOffset = {
        x: event.targetTouches[0].clientX - this.draggingItem.offsetLeft,
        y: event.targetTouches[0].clientY - this.draggingItem.offsetTop,
      }
      this.newPosition = { ...this.currentPosition }
    },
    // 手指拖动元素
    onPan(item) {
      if (this.draggingIndex === item) {
        this.currentPosition = {
          x: event.targetTouches[0].clientX,
          y: event.targetTouches[0].clientY,
        }
      }
    },
    // 手指放开元素
    onPanEnd(item) {
      if (this.draggingIndex === item) {
        this.draggingIndex = null
        this.draggingItem = null
        this.currentPosition = { x: 0, y: 0 }
        this.$nextTick(() => {
          this.list.splice(this.newPosition.y, 0, ...this.list.splice(this.newPosition.x, 1))
        })
      }
    },
  },
}
</script>

4. 在vue组件中使用拖动排序组件

最后，我们在vue组件中使用刚才编写的拖动排序组件。

<template>
  <div>
    <DraggableList />
  </div>
</template>

<script>
import DraggableList from '@/components/DraggableList'

export default {
  components: {
    DraggableList,
  },
}
</script>

5. 示例

下面是一个使用刚才编写的拖动排序组件的示例代码。

<template>
  <div class="container">
    <DraggableList />
  </div>
</template>

<script>
import DraggableList from './components/DraggableList'

export default {
  components: {
    DraggableList,
  },
}
</script>

<style>
.container {
  width: 100%;
  height: 100vh;
}
</style>

在这个示例中，我们通过引入一个名为DraggableList的组件来实现拖动排序。该组件包含一组需要排序的元素，以及相关的拖动控制逻辑。我们通过在父组件中引入该组件，并在模板中进行渲染，即可实现拖动排序的功能。

示例代码：

<template>
  <div>
    <DraggableList />
    <DraggableList />
  </div>
</template>

<script>
import DraggableList from './components/DraggableList'

export default {
  components: {
    DraggableList,
  },
}
</script>

在这个示例中，我们在父组件中渲染了两个拖动排序组件，实现了多个列表的拖动排序功能。