vue實現div可拖動位置也可改變盒子大小的原理
阿新 • • 發佈：2020-09-17
以下是效果圖：實現了div盒子在固定區域的拖動，也可改變盒子的高度和寬度，當超出邊距後無法繼續改變大小
這裡說一下大致原理：拖動和改變大小是分開來操作的，接下來分別說一下
盒子拖動
這裡用到了js的三個滑鼠事件，分別是onmousedown(滑鼠按下)、onmousemove（滑鼠移動）以及onmouseup(滑鼠鬆開)，大致流程就是滑鼠按下拖動圖示進行拖動時，動態獲取當前div的left和top再重新賦值給當前div的top、left值，當滑鼠鬆開再清除事件，至於固定在某個區域內拖動，在賦值的時候判斷當前top及left值是否超過限制區域的值，如果超過給最大值最小值
盒子改變大小
這裡用到的也是盒子拖動的三個事件，當滑鼠移入盒子左邊框觸發mousemove事件，動態計算盒子寬度重新賦值，滑鼠鬆開登出mousrmove事件，我將寬度和高度改變分別封裝了元件，用的時候直接呼叫就好
博主用的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">
<!-- 拖拽圖示 -->
<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: '我是拖動的小盒子',width: 400,height: 100,// 上邊距和左邊距
coordinate: {
x: 180,y: 10
}
}
}
},methods: {
// 區塊拖動
dragDiv(el,index) {
// dragId: 可拖動區域唯一標識
// moveId: 改變寬度元件唯一標識
const { dragId,coordinate } = this.moveInfo
let obig = document.getElementById('maxBoxId')
let osmall = document.getElementById(dragId)
// 用於儲存小的div拖拽前的座標
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
// 呼叫介面儲存資料
},// 改變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拖動寬度時超出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
}
// 設定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拖動寬度時超出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
}
// 設定div的最小寬度和最大寬度
if (this.moveInfo.height < 100) {
this.moveInfo.height = 100
}
if (this.moveInfo.height > 200) {
this.moveInfo.height = 200
}
},// 清除滑鼠事件
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,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>
<!-- 拖動右邊距改變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',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>改變高度的元件原理和寬度一樣，避免程式碼重複就不上傳了
上面就是大致流程和原始碼。
總結
到此這篇關於vue實現div可拖動位置也可改變盒子大小的文章就介紹到這了,更多相關vue 實現div拖動位置內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！