Vue 3 + TypeScript + Vite 项目中，实现选中图片移动-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue 3 + TypeScript + Vite 项目中，实现选中图片移动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

<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 属性来获取鼠标的位置。以下是一个简单的示例：文章来源地址https://www.toymoban.com/news/detail-641159.html

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`;

    // ...
  }
}

到了这里，关于Vue 3 + TypeScript + Vite 项目中，实现选中图片移动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！