vue之签章拖拽demo

最新推荐文章于 2025-05-16 09:33:54 发布

浏览器翻译官~

最新推荐文章于 2025-05-16 09:33:54 发布

阅读量3.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签：拖拽 vue

本文链接：https://blog.youkuaiyun.com/lbPro0412/article/details/85062589

前端vue技术点干货分享专栏收录该内容

77 篇文章 ¥99.90 ¥299.90

订阅专栏

本文介绍如何在Vue项目中实现签章的拖拽功能。通过监听鼠标按下、移动事件，动态创建并更新签章元素的位置，实现签章元素随鼠标移动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

理解：鼠标按下的时候，创建对应的元素，然后把原元素的布局属性给他，然后鼠标移动的尺寸给新建的元素富裕移动

直接上代码：

<template>
  <div class="main" id="main">
    <div class="tuo tuo1" @mousedown="move">
      1
    </div>
    <div class="tuo tuo2" @mousedown="move">
      2
    </div>
    <div class="tuo tuo3" @mousedown="move">
      3
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      positionX: 0,
      positionY: 0
    };
  },

  mounted() {},
  methods: {
    move(e) {
      let odiv = e.target; //获取目标元素
      let oMark = document.createElement("div"); //创建要拖拽的元素

了解本专栏