安装

pnpm i v3-moveable

使用

1// 使用moveablePlugin插件
2import moveablePlugin from 'v3-moveable'
3const app = createApp(App)
4app.use(moveablePlugin)
5app.mount('#app')

1<!-- 组件内部使用 -->
2<template>
3<!-- 拖拽范围   container-->
4  <div class="container" ref="container">
5    <!-- 自定义指令v-moveable 使用以及对应配置 -->
6    <div v-moveable="config" class="box" @focus="focus" @drag="drag" @drag-end="dragEnd" @scale-end="scaleEnd"
7      @rotate="rotate" @rotate-end="rotateEnd" v-if="show" @init="init"></div>
8
9  </div>
10  <button @click="show = false">销毁</button>
11
12</template>
13
14<script setup lang="ts">
15import { ref } from 'vue';
16import type { Moveable } from 'v3-moveable'
17const container = ref<HTMLElement>()
18const show = ref(true)
19const config = ref({
20  container: container,
21  position: { x: 20, y: 20 },
22  uses: ['scale', 'rotate'],
23  boundary: true
24})
25const init = (e: Moveable) => {
26  console.log(e);
27  e.setPosition({ x: 100, y: 100 })
28  e.setRatioSize(2)
29  e.setRotateDeg(30)
30}
31const focus = (e) => {
32  console.log('focus', e);
33}
34const drag = (e) => {
35  console.log('drag', e);
36}
37const dragEnd = (e) => {
38  console.log('dragEnd', e);
39}
40const scale = (e) => {
41  console.log('scale', e);
42}
43const scaleEnd = (e) => {
44  console.log('scaleEnd', e);
45}
46const rotate = (e) => {
47  console.log('rotate', e);
48}
49const rotateEnd = (e) => {
50  console.log('rotateEnd', e);
51}
52</script>
53
54<style scoped>
55.container {
56  width: 400px;
57  background-color: antiquewhite;
58  height: 600px;
59  margin: 0 auto;
60  margin-top: 100px;
61  overflow: hidden;
62}
63
64.box {
65  width: 50px;
66  height: 100px;
67  background-color: aqua;
68}
69</style>

1undefined

在main文件中 使用moveablePlugin插件
import moveablePlugin from 'v3-moveable'
const app = createApp(App)
app.use(moveablePlugin)
app.mount('#app')

在组件中可通过
v-moveable="config" 来操作

// 设置配置
const config = ref({
  container: container,  // 所在父元素
  position: { x: 20, y: 20 }, //设置初始位置
  uses: ['scale', 'rotate'], // 增加功能，默认可以移动，通过scale和rotate实现缩放和旋转
})
@init  //返回moveable对象通过这个值可以获取所有信息，并且可以调用set方法
const init = (e: Moveable) => {
  console.log(e);
  e.setPosition({ x: 100, y: 100 })
  e.setRatioSize(2)
  e.setRotateDeg(30)
}

@focus
@drag
@drag-end
@scale-end
@rotate
@rotate-end