<template>
|
<div ref="publicBox">
|
<div class="header" @mousedown="move" :class="{'move': moveFlag}">
|
<slot name="public-box-header"></slot>
|
</div>
|
<div class="content">
|
<slot name="public-box-content"></slot>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
name: 'PublicBox',
|
data () {
|
return {
|
moveFlag: false
|
}
|
},
|
created () {
|
},
|
methods: {
|
move (e) {
|
const that = this
|
const odiv = this.$refs.publicBox // 获取目标元素
|
// 算出鼠标相对元素的位置
|
const disX = e.clientX - odiv.offsetLeft
|
const disY = e.clientY - odiv.offsetTop
|
|
const disH = odiv.offsetHeight
|
const disW = odiv.offsetWidth
|
|
document.onmousemove = (e) => {
|
that.moveFlag = true
|
// 鼠标按下并移动的事件
|
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
|
let left = e.clientX - disX
|
let top = e.clientY - disY
|
|
// 绑定元素位置到positionX和positionY上面
|
|
if (left >= window.innerWidth - disW) {
|
left = window.innerWidth - disW
|
}
|
|
if (left <= 0) {
|
left = 0
|
}
|
|
if (top >= window.innerHeight - disH) {
|
top = window.innerHeight - disH
|
}
|
|
if (top <= 60) {
|
top = 60
|
}
|
|
// 移动当前元素
|
odiv.style.left = (left) + 'px'
|
odiv.style.top = (top) + 'px'
|
odiv.style.bottom = 'auto'
|
}
|
document.onmouseup = (e) => {
|
that.moveFlag = false
|
document.onmousemove = null
|
document.onmouseup = null
|
}
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang='scss'>
|
.move {
|
cursor: move;
|
}
|
</style>
|
