vue實(shí)現(xiàn)div可拖動(dòng)位置也可改變盒子大小的原理
以下是效果圖:實(shí)現(xiàn)了div盒子在固定區(qū)域的拖動(dòng),也可改變盒子的高度和寬度,當(dāng)超出邊距后無法繼續(xù)改變大小
這里說一下大致原理:拖動(dòng)和改變大小是分開來操作的,接下來分別說一下
盒子拖動(dòng)
這里用到了js的三個(gè)鼠標(biāo)事件,分別是onmousedown(鼠標(biāo)按下)、onmousemove(鼠標(biāo)移動(dòng))以及onmouseup(鼠標(biāo)松開),大致流程就是鼠標(biāo)按下拖動(dòng)圖標(biāo)進(jìn)行拖動(dòng)時(shí),動(dòng)態(tài)獲取當(dāng)前div的left和top再重新賦值給當(dāng)前div的top、left值,當(dāng)鼠標(biāo)松開再清除事件,至于固定在某個(gè)區(qū)域內(nèi)拖動(dòng),在賦值的時(shí)候判斷當(dāng)前top及l(fā)eft值是否超過限制區(qū)域的值,如果超過給最大值最小值
盒子改變大小
這里用到的也是盒子拖動(dòng)的三個(gè)事件,當(dāng)鼠標(biāo)移入盒子左邊框觸發(fā)mousemove事件,動(dòng)態(tài)計(jì)算盒子寬度重新賦值,鼠標(biāo)松開注銷mousrmove事件,我將寬度和高度改變分別封裝了組件,用的時(shí)候直接調(diào)用就好
博主用的vue寫的,這里展示的也是銅鼓vue書寫的,其他都是大同小異,知道原理就好
// index.vue <template> <!-- demo --> <div class="demo" id="maxBoxId"> <div :id="moveInfo.dragId" :style=" 'width:' + moveInfo.width + 'px; left:' + moveInfo.coordinate.x + 'px; top:' + moveInfo.coordinate.y + 'px; height:' + moveInfo.height + 'px' " class="drag-class" > <div class="drag-content"> <div class="content-text"> <!-- 拖拽圖標(biāo) --> <div class="drag-icon"> <i class="iconfont icon-tuodong1 down-dragger" @mousedown.stop="dragDiv($event)" @mouseup.stop="dragUp($event)" ></i> </div> {{ moveInfo.text }} </div> <!-- 寬度改變組件 --> <ChangeWidth :moveId="moveInfo.moveId" index="0" @widthChange="changeWidth" @clearEvent="clearEvent" /> <!-- 高度改變組件 --> <ChangeHeight :moveId="moveInfo.moveId" index="1" @heightChange="heightChange" @clearEvent="clearEvent" /> </div> </div> </div> </template> <script> import ChangeWidth from '../component/ChangeWidth' import ChangeHeight from '../component/ChangeHeight' export default { components: { ChangeWidth, ChangeHeight }, name: 'demo', data() { return { moveInfo: { dragId: 'smallDragBoxId', moveId: 'smallMoveBoxId', text: '我是拖動(dòng)的小盒子', width: 400, height: 100, // 上邊距和左邊距 coordinate: { x: 180, y: 10 } } } }, methods: { // 區(qū)塊拖動(dòng) dragDiv(el, index) { // dragId: 可拖動(dòng)區(qū)域唯一標(biāo)識(shí) // moveId: 改變寬度組件唯一標(biāo)識(shí) const { dragId, coordinate } = this.moveInfo let obig = document.getElementById('maxBoxId') let osmall = document.getElementById(dragId) // 用于保存小的div拖拽前的坐標(biāo) osmall.startX = el.clientX - osmall.offsetLeft osmall.startY = el.clientY - osmall.offsetTop document.onmousemove = e => { let left, top left = e.clientX - osmall.startX top = e.clientY - osmall.startY osmall.style.left = left + 'px' osmall.style.top = top + 'px' coordinate.x = left coordinate.y = top if (left <= 0) { osmall.style.left = 0 + 'px' coordinate.x = 0 } if (top <= 0) { osmall.style.top = 0 + 'px' coordinate.y = 0 } if (left >= obig.offsetWidth - osmall.offsetWidth) { osmall.style.left = obig.offsetWidth - osmall.offsetWidth + 'px' coordinate.x = obig.offsetWidth - osmall.offsetWidth } if (top >= obig.offsetHeight - osmall.offsetHeight) { osmall.style.top = obig.offsetHeight - osmall.offsetHeight + 'px' coordinate.y = obig.offsetHeight - osmall.offsetHeight } } }, dragUp(el) { document.onmousemove = null document.onmouseup = null // 調(diào)用接口保存數(shù)據(jù) }, // 改變drag寬度尺寸 changeWidth(params) { const { index, width } = params let left const { dragId } = this.moveInfo // let obig = document.getElementById('maxBoxId') let osmall = document.getElementById(dragId) let boxWidth = document.getElementById('maxBoxId').offsetWidth left = osmall.style.left const newWidth = this.moveInfo.width + width // outWidth拖動(dòng)寬度時(shí)超出box的寬度 const outWidth = Number(left.slice(0, left.length - 2)) + Number(newWidth) - Number(boxWidth) // 如果超出box將截取留下的 if (outWidth >= 0) { this.moveInfo.width = Number(boxWidth) - Number(left.slice(0, left.length - 2)) } else { this.moveInfo.width = newWidth } // 設(shè)置div的最小寬度和最大寬度 if (this.moveInfo.width < 200) { this.moveInfo.width = 200 } if (this.moveInfo.width > 900) { this.moveInfo.width = 900 } }, // 改變drag高度 heightChange(params) { const { index, height } = params let top let osmall = document.getElementById(this.moveInfo.dragId) let boxHeight = document.getElementById('maxBoxId').offsetHeight top = osmall.style.top const newHeight = this.moveInfo.height + height // outHeight拖動(dòng)寬度時(shí)超出box的高度 const outHeight = Number(top.slice(0, top.length - 2)) + Number(newHeight) - Number(boxHeight) // 如果超出box將截取留下的 if (outHeight >= 0) { this.moveInfo.height = Number(boxHeight) - Number(top.slice(0, top.length - 2)) } else { this.moveInfo.height = newHeight } // 設(shè)置div的最小寬度和最大寬度 if (this.moveInfo.height < 100) { this.moveInfo.height = 100 } if (this.moveInfo.height > 200) { this.moveInfo.height = 200 } }, // 清除鼠標(biāo)事件 clearEvent() { document.onmousemove = null document.onmouseup = null } } } </script> <style lang="scss" scoped> .demo { position: relative; width: 100%; z-index: 10; width: 1200px; background: red; height: 300px; margin-bottom: 1000px; margin-left: 100px; .drag-class { background: rgba(255, 255, 255, 0); position: absolute; .drag-content { position: relative; height: 100%; .content-text { border: 1px dashed #ffffff; font-size: 34px; color: #ffffff; margin-top: 5px; position: relative; height: 100%; .drag-icon { position: absolute; right: 10px; top: 5px; float: left; // margin-right: 10px; .down-dragger { cursor: move; font-size: 30px; color: #dbdce0; color: #ffffff; } } } } } } </style>
以下是改變大小的組件
<template> <!-- 拖動(dòng)右邊距改變div寬度 --> <div :id="`width${moveId}`" class="x-handle" @mousedown="mouseDown"></div> </template> <script> export default { name: 'ChangeWidth', props: ['index', 'moveId'], data() { return { lastX: '' } }, created() { document.addEventListener('mouseup', this.mouseUp) }, destroyed() { document.removeEventListener('mouseup', this.mouseUp) }, methods: { mouseDown(event) { document.addEventListener('mousemove', this.mouseMove) this.lastX = event.screenX }, mouseMove(e) { this.$emit('widthChange', { width: e.screenX - this.lastX, index: this.index }) this.lastX = e.screenX }, mouseUp() { this.lastX = '' document.removeEventListener('mousemove', this.mouseMove) this.$emit('clearEvent') } } } </script> <style lang="less" scoped> .x-handle { width: 5px; cursor: e-resize; background: #2866f0; height: 30px; position: absolute; right: 0; top: 40%; } </style>
改變高度的組件原理和寬度一樣,避免代碼重復(fù)就不上傳了
上面就是大致流程和源碼。
總結(jié)
到此這篇關(guān)于vue實(shí)現(xiàn)div可拖動(dòng)位置也可改變盒子大小的文章就介紹到這了,更多相關(guān)vue 實(shí)現(xiàn)div拖動(dòng)位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)
這篇文章主要介紹了Vue使用z-tree處理大數(shù)量的數(shù)據(jù)以及生成樹狀結(jié)構(gòu)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04解決betterScroll在vue中存在圖片時(shí),出現(xiàn)拉不動(dòng)的問題
今天小編就為大家分享一篇解決betterScroll在vue中存在圖片時(shí),出現(xiàn)拉不動(dòng)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09Pycharm中開發(fā)vue?element項(xiàng)目時(shí)eslint的安裝和使用步驟
這篇文章主要介紹了Pycharm中開發(fā)vue?element項(xiàng)目時(shí)eslint的安裝和使用,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-05-05vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例
今天小編就為大家分享一篇vue主動(dòng)刷新頁面及列表數(shù)據(jù)刪除后的刷新實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09vue項(xiàng)目中使用ueditor的實(shí)例講解
下面小編就為大家分享一篇vue項(xiàng)目中使用ueditor的實(shí)例講解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue 實(shí)現(xiàn)網(wǎng)頁截圖功能詳解
這篇文章主要介紹了通過vue實(shí)現(xiàn)網(wǎng)頁截圖的功能,有興趣的童鞋可以了解一下2021-11-11vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由(適合初學(xué))
這篇文章主要介紹了vue vuex vue-rouert后臺(tái)項(xiàng)目——權(quán)限路由,通過本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系,本版本非常簡(jiǎn)單,適合初學(xué)者,需要的朋友可以參考下2017-12-12