vue 实现左右拖拽元素并且不超过他的父元素的宽度

<!--红绿线-->     <div class="begin-end-line">      <img :src="lineGreen" alt="" class="line bg-line" id="green" draggable="true" @mousedown="moveGreen">      <img :src="lineRed" alt="" class="line end-line" id="red" draggable="true" @mousedown="moveRed">     </div>

moveGreen(e) {    let odiv = e.target;    //获取目标元素    //算出鼠标相对元素的位置    let disX = e.clientX - odiv.offsetLeft;    document.onmousemove = (e)=>{    //鼠标按下并移动的事件     //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置     let left = e.clientX - disX;     if(left<-6){      return left=-6     }     if (left>684){      return left=684     }     console.log(left);     //绑定元素位置到positionX和positionY上面     this.positionX = top;     //移动当前元素     odiv.style.left = left + 'px';    };    document.onmouseup = (e) => {     document.onmousemove = null;     document.onmouseup = null;    };   }

let left = e.clientX - disX;     if(left<-6){      return left=-6     }     if (left>684){      return left=684     }     console.log(left);