vue3 手势插件

useDrag 拖拽 - 基础使用

useDrag

vue3 拖拽，简单使用案例

<template>
  <div class="flex fill center container">
    <ConfigPanel v-model="config" />
    <div v-bind="bind()" class="drag" :style="style">
      <div class="text">
        <span>拖拽观察位子:bind</span>
        <span> x:{{ Math.round(coords.x) }}, y:{{ Math.round(coords.y) }} </span>
      </div>
    </div>
    <div ref="boundRef" className="hover" />
  </div>
</template>

<script setup>
import { watch, reactive, ref, computed } from 'vue'
import ConfigPanel from './components/ConfigPanle.vue'
import { useDrag } from '@use-gesture-x/vue3'
import { useSpring } from './useSpring'
const boundRef = ref(null)
const dragRef = ref(null)
const coords = ref({ x: 0, y: 0 })
const [style, api] = useSpring()
const config = ref({
  axis: '',
  delay: 0,
  enabled: true,
  gesture: 'movement',
  rubberband: false,
  bounds: false
})
const dragConfig = computed(() => ({
  ...config.value,
  bounds: config.value.bounds ? boundRef : undefined
}))
const bind = useDrag(({ active, movement: [x, y] }) => {
  const changeInfo = {
    x: active ? x : 0,
    y: active ? y : 0,
    scale: active ? 1.2 : 1
  }
  api.set(changeInfo)
  coords.value = changeInfo
}, dragConfig)
</script>
<style scoped>
html,
body,
#root {
  height: 100%;
  width: 100%;
}

body {
  font-family: system-ui, sans-serif;
  min-height: 100vh;
  margin: 0;
}

*,
*:after,
*:before {
  box-sizing: border-box;
}

.flex {
  display: flex;
  align-items: center;
}

.flex.fill {
  height: 100%;
}

.flex.center {
  justify-content: center;
}

.container {
  width: 100%;
  height: 100%;
}

.drag {
  position: absolute;
  height: 120px;
  width: 120px;
  background-color: #ec625c;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-size: 10px;
}

.drag > div {
  margin: 10%;
  width: 80%;
  height: 80%;
  background-color: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}

.hover {
  height: 300px;
  width: 300px;
  background-color: royalblue;
  &::before {
    content: '可在右侧面板启用范围限制，蓝色为拖动范围区域。(1、元素范围 2、下左右坐标)';
    color: #fff;
  }
}

.hover:hover {
  background-color: darkblue;
}
</style>

复杂案例待更新