<template>
<div id='pondModel' ref='pondModel'>
<span v-for='(item,index) in 6' :key='index' @mousedown="move" ></span>
</div>
<template>
methods: {
move(e){
let odiv = e.target
let disX =e.clientX - odiv.offsetLeft
let disY =e.clientY - odiv.offsetTop
document.onmousemove=(e)=>{
let left = e.clientX - disX;
let top = e.clientY - disY;
console.log(top,'top')
console.log(left,'left')
let {
offsetHeight: pondModelHeight,
offsetWidth: pondModelWidth,
} = this.$refs.pondModel;
let {
offsetHeight: sonNodeHeight,
offsetWidth: sonNodeWidth,
} = odiv;
if (left < 0) {
left = 0;
}
if (top < 0) {
top = 0;
}
if (top > pondModelHeight - sonNodeHeight) {
top = pondModelHeight - sonNodeHeight
}
if (left > pondModelWidth - sonNodeWidth) {
left = pondModelWidth - sonNodeWidth
}
odiv.style.left = left +'px'
odiv.style.top = top +'px'
odiv.style.zIndex =999
}
document.onmouseup=(e)=>{
document.onmousemove = null
document.onmouseup = null
odiv.style.zIndex =1
odiv = null
}
},
}
#pondModel{
width:500px;
height:500px;
}
#pondModel span{
width:50px;
height:50px;
position:absolute;
}