Vue 3 + TypeScript + Vite 项目中，实现选中图片移动

Ayn慢慢2023-08-14 13:21

复制代码

<template>
  <div class="image-container" @mousedown="startDrag" @mousemove="drag" @mouseup="endDrag">
    <img src="path/to/image.jpg" alt="My Image" ref="imageRef">
  </div>
</template>

在组件的 <script> 标签中，定义相关的数据和方法。首先，使用 Vue 的 ref 函数创建一个对图片元素的引用：

复制代码

<script>
import { ref } from 'vue';

export default {
  setup() {
    const imageRef = ref(null);

    // ...

    return {
      imageRef,
      // ...
    };
  },
};
</script>

接下来，实现选中时出现边框的效果。你可以通过设置 CSS 样式来实现这一点。以下是一个简单的示例：

复制代码

.image-container {
  position: relative;
}

.image-container.selected {
  outline: 2px solid blue;
}

.image-container.selected::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px dashed blue;
}

在组件的 <template> 中，为选中的容器元素动态绑定 selected 类名。可以通过监听鼠标事件来实现这一点。例如，在 startDrag 方法中添加以下代码：

复制代码

function startDrag() {
  // 添加选中样式
  imageRef.value.parentElement.classList.add('selected');

  // ...
}

在 endDrag 方法中移除选中样式：

复制代码

function endDrag() {
  // 移除选中样式
  imageRef.value.parentElement.classList.remove('selected');

  // ...
}

实现拖动图片的功能。在 drag 方法中，计算鼠标移动的距离，并将其应用于图片元素的位置。这里可以使用鼠标事件的 clientX 和 clientY 属性来获取鼠标的位置。以下是一个简单的示例：

复制代码

function drag(event) {
  // 确保只有当图片被选中时才会触发拖动操作
  if (imageRef.value.parentElement.classList.contains('selected')) {
    const imageElement = imageRef.value;
    const containerElement = imageElement.parentElement;

    const deltaX = event.clientX - containerElement.offsetLeft;
    const deltaY = event.clientY - containerElement.offsetTop;

    imageElement.style.left = `${deltaX}px`;
    imageElement.style.top = `${deltaY}px`;

    // ...
  }
}