vue之签章拖拽demo

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

 

 

 

 

 

 

 

 

 

直接上代码：

<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"); //创建要拖拽的元素
      // 布局赋给新的元素
      oMark.style.width = odiv.offsetWidth + "px";