<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)=>{
        // console.log(this.$refs.pondModel.offsetHeight)
        //計算元素位置(需要判斷臨界值)
        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;
        // 左上角(left)
        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;
}