<template><div id="test" style="user-select: none;"><button @click="fangda">放大</button><button @click="suoxiao">縮小</button><button v-show="isTrue" @click="gai">添加</button><button v-show="!isTrue" @click="gai">移動</button><div class="content"><div:style="{transform: 'scale(' + num + ')',position: 'relative',width: '100%',height: '100%',}"@mousedown="moveMouse"@click="getOffect"><divv-for="(item, index) in boxArry":key="index":ref="'biaozhu' + index":class="'biaozhu' + index == 'biaozhu' + b_i ? 'biaozhu b_border' : 'biaozhu'":style="{width: item.width + 'px',height: item.height + 'px',position: 'absolute',left: item.left + 'px',top: item.top + 'px',background: 'rgba(43,100,206,0.3)',border: 'none',}"@mousedown.stop="move"@click="handelClick(index)"><div v-if="b_i == index" class="r_b" @mousedown="mouseMove11"></div></div><div:style="{height: biaozhuHeight + 'px',width: biaozhuWidth + 'px',top: biaozhuTop + 'px',left: biaozhuLeft + 'px',position: 'absolute',background: 'rgba(43,100,206,0.3)',}"></div><imgstyle="width: 100%; height: 100%; pointer-events: none;"src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3479844176,2436830052&fm=26&gp=0.jpg"alt=""@mousedown="isTrue ? null : move"/></div></div></div> </template> <script>export default {directives: {drag: function(el) {let dragBox = el //獲取當前元素dragBox.onmousedown = (e) => {//算出鼠標相對元素的位置let disX = e.clientX - dragBox.offsetLeftlet disY = e.clientY - dragBox.offsetTopconsole.log(disX, disY)document.onmousemove = (e) => {//用鼠標的位置減去鼠標相對元素的位置，得到元素的位置let left = e.clientX - disXlet top = e.clientY - disY//移動當前元素dragBox.style.left = left + 'px'dragBox.style.top = top + 'px'console.log(left, top, '111111111')}document.onmouseup = (e) => {//鼠標彈起來的時候不再移動document.onmousemove = null//預防鼠標彈起來后還會循環（即預防鼠標放上去的時候還會移動）document.onmouseup = null}}},},data() {return {num: 1,boxArry: [],isTrue: false,width: '',height: '',left: '',top: '',b_i: '',biaozhuHeight: 0,biaozhuWidth: 0,biaozhuTop: 0,biaozhuLeft: 0,}},methods: {getVuex() {console.log(this.$store.state.treeData)},commitVuex() {this.$store.commit('changeTreeData', { a: 1, b: 2 })},mouseOver2(e) {document.onmousedown = (e) => {let odiv = e.target //獲取目標元素//算出鼠標相對元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetToplet left = e.clientX - disXlet top = e.clientY - disY//綁定元素位置到positionX和positionY上面this.positionX = topthis.positionY = leftconsole.log(this.boxArry, this.dragsIndex)//移動當前元素this.boxArry[this.b_i].width = leftthis.boxArry[this.b_i].height = top}},drags(e) {console.log(e)},mouseMove11(e) {// console.log(e,index)let odiv = e.target //獲取目標元素//算出鼠標相對元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTop// debugger;e.target.onmousemove = (e) => {//鼠標按下并移動的事件//用鼠標的位置減去鼠標相對元素的位置，得到元素的位置// console.log('aaaaaaaaaaaaa',e)let left = e.clientX - disXlet top = e.clientY - disY//綁定元素位置到positionX和positionY上面this.positionX = topthis.positionY = left// console.log(this.boxArry,this.dragsIndex)//移動當前元素this.boxArry[this.b_i].width = leftthis.boxArry[this.b_i].height = tope.target.onmouseup = (e) => {e.target.onmousemove = null// document.onmouseup = null;}}},gai() {this.isTrue = !this.isTrue},getOffect(e) {console.log(e)document.onmouseup = null// this.left=e.offsetX// this.top=e.offsetY},moveMouse(e) {let odiv = e.target //獲取目標元素//算出鼠標相對元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTopconsole.log(disX, disY)if (this.isTrue) {// 拖動document.onmousemove = (e) => {//鼠標按下并移動的事件//用鼠標的位置減去鼠標相對元素的位置，得到元素的位置let left = e.clientX - disXlet top = e.clientY - disY//綁定元素位置到positionX和positionY上面this.positionX = topthis.positionY = left//移動當前元素odiv.style.left = left + 'px'odiv.style.top = top + 'px'}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = null}} else {// 添加divconsole.log(e)document.onmousemove = (e) => {//鼠標按下并移動的事件//用鼠標的位置減去鼠標相對元素的位置，得到元素的位置let left = disX - odiv.getBoundingClientRect().xlet top = disY - odiv.getBoundingClientRect().yconsole.log(e.target.offsetLeft)this.width = (e.clientX - disX) / this.numthis.height = (e.clientY - disY) / this.numthis.biaozhuWidth = this.widththis.biaozhuHeight = this.heightthis.biaozhuLeft = leftthis.biaozhuTop = topdocument.onmouseup = (e) => {let left = disX - odiv.getBoundingClientRect().xlet top = disY - odiv.getBoundingClientRect().ythis.width = (e.clientX - disX) / this.numthis.height = (e.clientY - disY) / this.numconsole.log(e.target.getBoundingClientRect(), disX, disY)if (this.width > 5 && this.height > 5) {this.boxArry.push({width: this.width,height: this.height,left: left,top: top,})}this.biaozhuWidth = 0this.biaozhuHeight = 0this.biaozhuLeft = 0this.biaozhuTop = 0document.onmousemove = nulldocument.onmouseup = null}}}},move(e) {let odiv = e.target //獲取目標元素//算出鼠標相對元素的位置let disX = e.clientX - odiv.offsetLeftlet disY = e.clientY - odiv.offsetTopdocument.onmousemove = (e) => {//鼠標按下并移動的事件//用鼠標的位置減去鼠標相對元素的位置，得到元素的位置let left = e.clientX - disXlet top = e.clientY - disY//綁定元素位置到positionX和positionY上面this.positionX = topthis.positionY = left//移動當前元素odiv.style.left = left + 'px'odiv.style.top = top + 'px'}document.onmouseup = (e) => {document.onmousemove = nulldocument.onmouseup = null}},fangda() {this.num += 0.1},suoxiao() {this.num -= 0.1},tianjia() {this.boxArry.push({width: 100,height: 100,left: 20,top: 20,})},handelClick(i) {this.b_i = iconsole.log(i)},dragstart(event, data) {// console.log('drag')// event.dataTransfer.setData('item', data)},dragend(event) {// event.dataTransfer.clearData()},},} </script> <style lang="less">#test {/deep/.el-dialog__body {padding: 10px 20px !important;}.content {width: 800px;height: 500px;background: rgb(0, 255, 64);margin: 0 auto;overflow: hidden;position: relative;.drag_box {width: 150px;height: 90px;border: 1px solid #666;background-color: #ccc;/* 使用定位，脫離文檔流 */position: relative;top: 100px;left: 100px;/* 鼠標移入變成拖拽手勢 */cursor: move;z-index: 3000;}.b_border {border: 1px solid red !important;}.biaozhu {z-index: 9999999;}.r_b {position: absolute;right: 0;bottom: 0;width: 20px;height: 20px;background: red;}.r_b:hover {cursor: se-resize;}}} </style>

總結

以上是生活随笔為你收集整理的vue在图片标注矩形框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。