vue实现div拖拽

<template>
  <div>
    <el-form label-width="33%">
      <el-row>
        <el-col :span="2">
          <el-button type="primary" @click="addText">添加文本框</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="addRadio">添加小圆点</el-button>
        </el-col>
      </el-row>
    </el-form>
    <p>&nbsp;</p>
    <div ref="pictureRef" style="position: relative;overflow: auto;border: 1px solid rgb(12, 14, 12);" @mouseup="up">
      <div
        v-for="item in pictureDivList"
        :id="item.value"
        :ref="item.value"
        :key="item.value"
        class="suspen"
        @mousedown="down(item.value)"
        @mouseup="up"
      ></div>
      <!-- 添加小圆点 -->
      <div
        v-for="item in pictureDivListRadio"
        :id="item.value"
        :ref="item.value"
        :key="item.value"
        class="suspenradio"
        @mousedown="down(item.value)"
        @mouseup="up"
      ></div>
      <img
        src="@/assets/bangye.jpg"
        draggable="false"
        style="width:100%;height:70%;object-fit: fill;object-fit: contain;object-fit: scale-down;float:left;"
      />
    </div>
    <!-- <el-button type="primary" @click="test">测试按钮</el-button>
    <div :style="classStyle"></div> -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        classStyle: 'width: 2vh;height: 2vh;background-color: green;border-radius: 50%;',
        keyShow: true,
        pictureDivList: [], //div文本框
        //为div拖拽数据
        isDown: false, //记录鼠标状态
        divId: '', //div标签的id
        move_div: '', //要操作的div对象
        m_move_x: '', //各种鼠标信息
        m_move_y: '', //各种鼠标信息
        m_down_x: '', //各种鼠标信息
        m_down_y: '', //各种鼠标信息
        dx: '', //各种鼠标信息
        dy: '', //各种鼠标信息
        md_x: '', //各种鼠标信息
        md_y: '', //各种鼠标信息
        ndx: '', //各种鼠标信息
        ndy: '', //各种鼠标信息
        pictureDivListRadio: [],
      }
    },
    methods: {
      addText() {
        let id = this.generateUUID()
        this.pictureDivList.push({ value: id })
        // this.keyShow = !this.keyShow
        // if (this.keyShow == true) {
        //   this.classStyle = 'width: 2vh;height: 2vh;background-color: green;border-radius: 50%;'
        // } else {
        //   this.classStyle = 'width: 2vh;height: 2vh;background-color: red;border-radius: 50%;'
        // }
      },
      addRadio() {
        //添加小圆点
        let id = this.generateUUID()
        this.pictureDivListRadio.push({ value: id })
      },
      generateUUID() {
        //生成uuid
        var d = new Date().getTime()
        if (window.performance && typeof window.performance.now === 'function') {
          d += performance.now() //use high-precision timer if available
        }
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
          var r = (d + Math.random() * 16) % 16 | 0
          d = Math.floor(d / 16)
          return (c == 'x' ? r : (r & 0x3) | 0x8).toString(16)
        })
        return uuid
      },
      down(divLabel) {
        //this.divId = divLabel
        this.move_div = document.getElementById(divLabel)
        this.isDown = true

        //获取鼠标按下时坐标
        this.m_down_x = event.pageX
        this.m_down_y = event.pageY
        //获取div坐标
        this.dx = this.move_div.offsetLeft
        this.dy = this.move_div.offsetTop
        //获取鼠标与div偏移量
        this.md_x = this.m_down_x - this.dx
        this.md_y = this.m_down_y - this.dy
        console.log('坐标')
        console.log(this.move_div.offsetLeft)
        console.log(this.move_div.offsetTop)
        var that = this
        document.onmousemove = function(ev) {
          if (that.isDown) {
            that.move_div = document.getElementById(divLabel)
            //实时更新div的坐标
            that.dx = that.move_div.offsetLeft
            that.dy = that.move_div.offsetTop

            //获取鼠标移动实时坐标
            that.m_move_x = ev.pageX
            that.m_move_y = ev.pageY

            //鼠标按下时移动才触发
            //if (this.isDown) {
            //获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量
            that.ndx = that.m_move_x - that.md_x
            that.ndy = that.m_move_y - that.md_y
            //把新div坐标值赋给div对象

            that.move_div.style.left = parseInt((that.ndx / that.$refs.pictureRef.getBoundingClientRect().width) * 100).toString() + '%'
            that.move_div.style.top = parseInt((that.ndy / that.$refs.pictureRef.getBoundingClientRect().height) * 100).toString() + '%'
            //将移动后的新坐标写入表格
            let locationXY = that.move_div.style.left + ',' + that.move_div.style.top
          }
        }
        //此处是为了防止在火狐浏览器下拖拽时会出现的两次阴影的效果，此处代码可以禁用
        document.onmouseup = function() {
          document.onmousemove = null
          document.onmouseup = null
        }
      },
      up(divLabel) {
        this.isDown = false
      },
      doubleEvent() {
        this.isDown = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .suspen {
    position: absolute;
    //position: relative;
    font-size: 20px;
    top: 15%; /*div的y轴*/
    left: 15%; /*div的x轴*/
    width: 8%;
    height: 4%;
    overflow: auto;
    zoom: 1;
    z-index: 999;
    background-color: yellow;
    border: 1px solid rgb(12, 14, 12);
    cursor: move;
  }
  .suspenradio {
    position: absolute;
    top: 15%; /*div的y轴*/
    left: 15%; /*div的x轴*/
    width: 15px;
    height: 15px;
    overflow: auto;
    zoom: 1;
    z-index: 999;
    background-color: red;
    // cursor: move;
    border-radius: 50%;
  }
</style>