【Vue】拖拽電子合同簽章效果 demo（適用PC端范圍拖拽）

主要是為了解決公司項目需要簽章獲取 PDF 內印章位置的需求，非常感謝下面這個博客提供的資料。

原參考博客 vue拖拽效果（適用范圍自定義表單，電子合同簽章等）

<template>
  <div class="all">
    <!-- 給需要拖拽的對象設置可拖拽屬性 -->
    <div
      class="oneDiv"
      draggable="true"
      @dragstart="dragstart($event, item)"
      @dragend="dragend"
      v-for="(item, index) in dragList"
      :key="index"
    >
      {{ item.name }}
    </div>
    <!-- 給拖拽存放區添加拖拽存放區事件 -->
    <div class="drag" @drop="drop" @dragover.prevent>
      <div
        :class="['box', item.selectName]"
        @mousedown="move($event, item)"
        @click="getModel(item)"
        v-for="(item, index) in dropData"
        :key="index"
        :style="{ left: item.left + 'px', top: item.top + 'px' }"
      >
        {{ item.name }}
        {{ item.model }}
      </div>
    </div>

    <!-- 參數展示 -->
    <div class="set">
      <span
        v-for="(value, key, index) in currentItem"
        :key="value.type"
        style="margin-right: 20px"
        >{{ key }}:{{ value }}索引({{ index }})</span
      >
      <el-input
        v-model="curretnInput"
        placeholder=""
        @change="setModel"
      ></el-input>
    </div>

    <el-button @click="getPDFXY">獲取pdf內坐標</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 拖拽數據
      dropData: [],
      // 參數數據（可拖拽多個）
      dragList: [
        {
          name: 'DIV',
          width: 50,
          height: 50,
          left: 0,
          top: 0,
          type: 1,
          model: '111'
        },
        {
          name: '數字',
          width: 50,
          height: 50,
          left: 0,
          top: 0,
          type: 2,
          model: ''
        },
        {
          name: '日期',
          width: 50,
          height: 50,
          left: 0,
          top: 0,
          type: 3,
          model: ''
        },
        {
          name: '簽署區',
          width: 50,
          height: 50,
          left: 0,
          top: 0,
          type: 4,
          model: ''
        }
      ],
      // 拖動的當前對象
      currentItem: {},
      curretnInput: '',
      currentName: '',
      // 位置xy
      x: '',
      y: ''
    }
  },
  computed: {},
  methods: {
    // 獲取簽章內部xy坐標
    getPDFXY() {
      console.log(this.x, this.y)
    },
    // 內部移動事件
    move(e, item) {
      const odiv = e.target
      // 算出鼠標相對元素的位置
      const disX = e.clientX - odiv.offsetLeft
      const disY = e.clientY - odiv.offsetTop
      // 鼠標按下拖動
      document.onmousemove = e => {
        let left = e.clientX - disX
        let top = e.clientY - disY
        // 設置邊距限制
        if (top <= 0) {
          top = 0
        }
        if (top >= 500 - 100) {
          top = 500 - 100
        }
        if (left >= 1000 - 100) {
          left = 1000 - 100
        }
        if (left <= 0) {
          left = 0
        }

        // 拖拽位置設定
        item.left = left
        item.top = top

        // 獲取位置
        // 500 容器高度 50 印章一半距離
        this.x = left + 50
        this.y = 500 - top - 50
      }
      // 移除
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    dragstart(e, item) {
      // 將拖拽對象的參數傳遞給拖拽存放地
      e.dataTransfer.setData('item', JSON.stringify(item))
    },
    dragend(e) {
      // 清除
      e.dataTransfer.clearData()
    },
    // 拖拽事件，獲取參數
    drop(e) {
      console.log(e)
      // 獲取拖拽對象的參數
      let data = e.dataTransfer.getData('item')
      data = JSON.parse(data)
      // 鼠標落點位置相對於當前拖拽存放地的 x y
      data.left = e.layerX
      data.top = e.layerY
      // 存放到當前拖拽對象生成的列表中
      this.dropData.push(data)
      console.log(this.dropData)
    },
    // 獲取參數
    getModel(item) {
      this.dropData = this.dropData.map(item => {
        item.selectName = ''
        return item
      })
      console.log(this.dropData)
      console.log(this.dragList)
      item.selectName = 'select'
      this.curretnInput = item.model
      this.currentItem = item
    },
    // 設置input輸入
    setModel() {
      this.currentItem.model = this.curretnInput
    }
  }
}
</script>

<style lang="less" scoped>
.all {
  overflow: hidden;
}
.drag {
  overflow: hidden;
  width: 1000px;
  height: 500px;
  background: skyblue;
  margin: 50px auto;
  position: relative;
  .box {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    background: greenyellow;
    user-select: none;
    cursor: pointer;
  }
  .select {
    background: white;
  }
}
.oneDiv {
  width: 150px;
  height: 30px;
  text-align: center;
  // margin: 50px;
  float: left;
  margin: 0 20px;
  border: 1px solid;
  line-height: 30px;
  cursor: pointer;
}
.numberInput {
  width: 50px;
  height: 50px;
}
</style>