JSPM

安装

pnpm i v3-moveable

使用

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

<!-- 组件内部使用 -->
<template>
<!-- 拖拽范围   container-->
  <div class="container" ref="container">
    <!-- 自定义指令v-moveable 使用以及对应配置 -->
    <div v-moveable="config" class="box" @focus="focus" @drag="drag" @drag-end="dragEnd" @scale-end="scaleEnd"
      @rotate="rotate" @rotate-end="rotateEnd" v-if="show" @init="init"></div>

  </div>
  <button @click="show = false">销毁</button>

</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { Moveable } from 'v3-moveable'
const container = ref<HTMLElement>()
const show = ref(true)
const config = ref({
  container: container,
  position: { x: 20, y: 20 },
  uses: ['scale', 'rotate'],
  boundary: true
})
const init = (e: Moveable) => {
  console.log(e);
  e.setPosition({ x: 100, y: 100 })
  e.setRatioSize(2)
  e.setRotateDeg(30)
}
const focus = (e) => {
  console.log('focus', e);
}
const drag = (e) => {
  console.log('drag', e);
}
const dragEnd = (e) => {
  console.log('dragEnd', e);
}
const scale = (e) => {
  console.log('scale', e);
}
const scaleEnd = (e) => {
  console.log('scaleEnd', e);
}
const rotate = (e) => {
  console.log('rotate', e);
}
const rotateEnd = (e) => {
  console.log('rotateEnd', e);
}
</script>

<style scoped>
.container {
  width: 400px;
  background-color: antiquewhite;
  height: 600px;
  margin: 0 auto;
  margin-top: 100px;
  overflow: hidden;
}

.box {
  width: 50px;
  height: 100px;
  background-color: aqua;
}
</style>

在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