在指定区域通过拖拽控制小图相对于指定区域的位置及小图的大小

效果

         使用的一款软件将视频转gif有水印，将就着看看吧,通过上面的控制，可以获取到二维码相对于区域的位置，及二维码大小的参数，这其中用的的一个js库interactjs 

具体实现代码

        Interact.vue组件

<template>
  <div
    id="payconfig-drag-area"
    :style="{ backgroundImage: `url(${bgImageUrl})` }"
  >
    <img
      id="payconfig-drag-element"
      :src="qrCodeImg"
      style="width: 60px; height: 60px"
    />
  </div>
</template>

<script lang="ts" setup>
import interact from 'interactjs'
// 引入二维码图片
import qrCodeImg from '../assets/img/qrCode.png'
import { computed } from 'vue'

const props = defineProps<{
  bgImage?: string
}>()

const bgImageUrl = computed(() => props.bgImage)

const emits = defineEmits<{
  (
    e: 'getPositionAndSize',
    data: {
      x: number | undefined
      y: number | undefined
      width: number
      height: number
    }
  ): void
}>()

// 定义一个 Interact.js 事件监听器
interact('#payconfig-drag-element')
  .draggable({
    modifiers: [
      interact.modifiers.restrictRect({
        restriction: 'parent',
        endOnly: true,
      }),
    ],
    listeners: {
      move(event) {
        const target = event.target
        const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
        const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy

        target.style.transform = `translate(${x}px, ${y}px)`
        target.setAttribute('data-x', x)
        target.setAttribute('data-y', y)
      },
      end() {
        getPositionAndSize()
      },
    },
  })
  .resizable({
    edges: { left: true, right: true, bottom: true, top: true },
    listeners: {
      move(event) {
        const target = event.target
        const x = parseFloat(target.getAttribute('data-x')) || 0
        const y = parseFloat(target.getAttribute('data-y')) || 0

        target.style.width = `${event.rect.width}px`
        target.style.height = `${event.rect.height}px`
        target.style.transform = `translate(${x}px, ${y}px)`
      },
      end() {
        getPositionAndSize()
      },
    },
    modifiers: [
      interact.modifiers.restrictSize({
        min: { width: 50, height: 50 },
      }),
    ],
  })

function getPositionAndSize() {
  const target = document.getElementById('payconfig-drag-element')
  // 获取目标元素的rect属性
  const targetRect = target?.getBoundingClientRect()
  // 获取目标元素父元素的rect属性
  const parentRect = target?.parentNode?.getBoundingClientRect()
  const x = targetRect && targetRect.left - parentRect.left
  const y = targetRect && targetRect.top - parentRect.top
  const width = targetRect?.width || 50
  const height = targetRect?.height || 50

  emits('getPositionAndSize', { x, y, width, height })
}
</script>

<style scoped lang="scss">
#payconfig-drag-area {
  width: 500px;
  height: 300px;
  border: 1px solid #ccc;
  background-repeat: no-repeat;
  background-size: contain;
}
</style>

使用的地方

        interactjs里面还有好多拖拽相关的操作的使用，有兴趣可以了解一下，不过都是英文的文档，暂时没找到中文文档，看得我头皮发麻