vue3中用css transform实现组件自由拖拽

在Vue 3中，可以使用CSS transform 和 mousedown、mousemove、mouseup 事件来实现组件的自由拖拽。以下是一个简单的例子，展示如何使用这些技术来实现组件的自由拖拽。

1. 创建一个Vue 3组件

首先，创建一个Vue 3组件（例如，Draggable.vue），并添加模板、样式和脚本。

<template>
  <div
    class="draggable"
    :style="style"
    @mousedown="startDrag"
  >
    Drag Me
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    const x = ref(0);
    const y = ref(0);
    const isDragging = ref(false);
    const initialX = ref(0);
    const initialY = ref(0);
    const style = ref({});

    const startDrag = (event) => {
      isDragging.value = true;
      initialX.value = event.clientX - x.value;
      initialY.value = event.clientY - y.value;

      document.addEventListener('mousemove', drag);
      document.addEventListener('mouseup', stopDrag);
    };

    const drag = (event) => {
      if (isDragging.value) {
        x.value = event.clientX - initialX.value;
        y.value = event.clientY - initialY.value;
        style.value = {
          transform: `translate(${x.value}px, ${y.value}px)`,
        };
      }
    };

    const stopDrag = () => {
      isDragging.value = false;
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', stopDrag);
    };

    onMounted(() => {
      document.addEventListener('mouseup', stopDrag);
    });

    onBeforeUnmount(() => {
      document.removeEventListener('mousemove', drag);
      document.removeEventListener('mouseup', stopDrag);
    });

    return {
      style,
      startDrag,
    };
  },
};
</script>

<style scoped>
.draggable {
  width: 100px;
  height: 100px;
  background-color: #42b983;
  cursor: grab;
  position: absolute;
  user-select: none;
}
</style>

2. 解释

• 模板 (template): 组件的HTML结构是一个 div，并绑定了 @mousedown 事件来启动拖拽。style 是一个动态绑定的样式对象，用于更新位置。

• 脚本 (script):

  • ref 用于创建响应式变量。
  • startDrag 函数在鼠标按下时触发，记录初始位置并绑定 mousemove 和 mouseup 事件。
  • drag 函数在鼠标移动时触发，更新组件位置。
  • stopDrag 函数在鼠标松开时触发，解除事件绑定。

• 样式 (style): 为组件设置基本样式，使其可见并提供拖拽视觉效果。

3. 使用

可以在你的Vue 3应用中直接使用这个组件，像这样：

<template>
  <div>
    <Draggable />
  </div>
</template>

<script>
import Draggable from './components/Draggable.vue';

export default {
  components: {
    Draggable,
  },
};
</script>

这个例子展示了如何使用CSS transform 和事件处理在Vue 3中实现一个简单的拖拽功能。