vue3实现手机上可拖拽元素的组件

前端

2024-01-23 18:45:52

在移动端使用 Vue3 创建可拖拽元素的终极指南

什么是可拖拽元素？

在当今移动设备盛行的时代，交互式用户界面至关重要。可拖拽元素是一种常见的交互方式，允许用户通过触摸或鼠标移动屏幕上的元素。这可以极大地提高用户操作的便捷性和趣味性。

使用 Vue3 创建可拖拽元素

Vue3 是一个流行的 JavaScript 框架，非常适合创建交互式 Web 应用程序。以下是如何使用 Vue3 创建一个可在移动端拖拽的元素：

1. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目：

vue create vue3-draggable-element

2. 安装依赖

安装必要的依赖项：

npm install vue3-draggable-element vue-router vuex

3. 配置项目

配置 Vuex 存储：

// src/main.js
import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {},
  mutations: {},
  actions: {}
})

Vue.use(Vuex)

export default store

配置 Vue 路由：

// src/router/index.js
import VueRouter from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

配置 Vue 组件：

// src/App.vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import { createApp } from 'vue'
import router from './router'
import store from './store'

const app = createApp({})

app.use(router)
app.use(store)

app.mount('#app')
</script>

4. 创建拖拽元素组件

在 src/components 目录中创建一个名为 DraggableElement.vue 的文件：

// src/components/DraggableElement.vue
<template>
  <div class="draggable-element" :style="{ left: left, top: top }" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <slot />
  </div>
</template>

<script>
export default {
  props: ['left', 'top'],
  data() {
    return {
      startX: 0,
      startY: 0,
      isDragging: false
    }
  },
  methods: {
    onTouchStart(e) {
      this.startX = e.touches[0].clientX
      this.startY = e.touches[0].clientY
      this.isDragging = true
    },
    onTouchMove(e) {
      if (this.isDragging) {
        const dx = e.touches[0].clientX - this.startX
        const dy = e.touches[0].clientY - this.startY
        this.left += dx
        this.top += dy
        this.startX = e.touches[0].clientX
        this.startY = e.touches[0].clientY
      }
    },
    onTouchEnd(e) {
      this.isDragging = false
    }
  }
}
</script>

<style scoped>
.draggable-element {
  position: absolute;
  z-index: 99;
}
</style>

5. 使用拖拽元素组件

在 src/views/Home.vue 文件中使用拖拽元素组件：

// src/views/Home.vue
<template>
  <div id="home">
    <draggable-element left="100px" top="100px">
      <div>可拖拽元素</div>
    </draggable-element>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>