<template>
<div id="app" ref="parentNode">
<button @click="isOpen = !isOpen">边界 /{{ !isOpen ? "关" : "开" }}</button>
<div class="target" ref="sonNode" @mousedown="movePos">
X: {{ positionX }} <br />
Y: {{ positionY }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
positionX: 0,
positionY: 0,
isOpen: false,
};
},
methods: {
movePos(e) {
//目标元素
let el = e.target;
let posX = e.clientX - el.offsetLeft;
let posY = e.clientY - el.offsetTop;
document.onmousemove = (e) => {
//计算元素位置(需要判断临界值)
let left = e.clientX - posX;
let top = e.clientY - posY;
/***** 临界值 starting(此区域代码可注释) ***/
if (this.isOpen) {
// 获取父元素 自元素 的宽高
let { offsetHeight: parentNodeHeight, offsetWidth: parentNodeWidth } =
this.$refs.parentNode;
let { offsetHeight: sonNodeHeight, offsetWidth: sonNodeWidth } =
this.$refs.sonNode;
// 左上角(left)
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
// 左下角
if (top > parentNodeHeight - sonNodeHeight) {
top = parentNodeHeight - sonNodeHeight;
}
if (left > parentNodeHeight - sonNodeWidth) {
left = parentNodeHeight - sonNodeWidth;
}
}
/***** 临界值 ending ***/
this.positionX = top;
this.positionY = left;
//移动当前元素
el.style.left = left + "px";
el.style.top = top + "px";
};
document.onmouseup = (e) => {
document.onmousemove = null;
document.onmouseup = null;
};
},
},
};
</script>
<style scoped>
#app {
position: relative;
width: 500px;
background: #999;
height: 500px;
}
.target {
position: absolute;
left: 0;
right: 0;
width: 100px;
height: 50px;
background: red;
cursor: pointer;
}
</style>