vue拖拽效果(適用範圍自定義表單,電子合同簽章)
阿新 • • 發佈:2021-11-03
參考部落格 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>