vue中实现图标在背景图上拖拽标点

实现图标在图上标点，拖拽移动不能出背景图片的范围
THML部分

          <div class="manager_detail"  v-if="!hidden"
               :style="{backgroundImage: 'url(' + (coverImgUrl ? coverImgUrl : baseImg) + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
            <img id="app" src="@/assets/image/f5.png"  @mousedown="moveDown" @mouseup='moveUp'/>
          </div>

js部分
data部分：

    data() {
      return {
        relativeMouseX:0,
        relativeMouseY:0,
        onmoveDown:false,
        baseImg: require('@/assets/image/sunnyBackImg.jpg'),
        coverImgUrl: '',
        }
        }

      moveDown(e){
    //    console.log(e)
        this.onmoveDown = true;
        let odiv = e.target;
        let x = e.clientX - odiv.offsetLeft;
        let y = e.clientY - odiv.offsetTop;
     //   console.log(odiv.offsetLeft,odiv.offsetTop)
        if(this.onmoveDown = true){
        document.onmousemove = (e) => {
          event.preventDefault();
          let left = e.clientX - x;
          let top = e.clientY - y;
          this.relativeMouseX = left;
          this.relativeMouseY = top;
          if (left <= 0) {
            left = 0;
          }else if(left >=960){
            left = 960;
          }
          else if (left >= document.documentElement.clientWidth - odiv.offsetWidth){
            left = document.documentElement.clientWidth - odiv.offsetWidth;
          }
          if (top <= 0) {
            top = 0;
          }else if(top >=260){
            top = 260;
          }
          else if (top >= document.documentElement.clientHeight - odiv.offsetHeight){
            top = document.documentElement.clientHeight - odiv.offsetHeight

          }
          odiv.style.left = left + "px";
          odiv.style.top = top + "px"

        }
        }
        // document.onmouseup = (e) => {
        // 	document.onmousemove = null;
        // 	document.onmouseup = null
        // }
      },
      moveUp(e){ 
        document.onmouseup = (e) => {
          this.onmoveDown = false
          document.onmousemove = null;
          document.onmouseup = null
        }
      }

实现鼠标松开，图标不动的关键代码（如果不添加此段代码，效果就是鼠标按住拖拽，图标移动，但是鼠标抬起，图片还是得跟着鼠标移动，再点击图标，图标才会停止移动）：

event.preventDefault();

css

  #app{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 40px;
    height: 40px;
    z-index: 1000;
    /* background: #ccc; */
    /* background-image: url('@/assets/image/f5.png');  */
  }
  .manager_detail{
    position: relative;
    height: 300px;
    width:1000px;
    /* background: url("../../assets/image/login-background.jpg") no-repeat center; */
  }

将后台返回的值标点在背景图上

      getList() {
        this.loading = true;
        listKeyarea(this.queryParams).then(response => {
          this.keyareaList = response.rows;
          this.total = response.total;
          this.loading = false;
          //平面图标点获取后台返回的点的坐标
          console.log("objList.length="+this.keyareaList.length);
          for(var i=0;i<this.keyareaList.length;i++){
            var obj = this.keyareaList[i];
            console.log("keyareaName="+obj.keyareaName);
            if(obj.topyCount !== null && obj.topxCount !== null){
            var x = obj.topxCount;
            var y = obj.topyCount;
            
            this.banMa.push({
              id:this.banMa.length+1,
              x,
              y,
            })
            }

             this.createMarker(x,y)
          }
         // console.log(this.banMa)
           
        });
      },
      //绘制点在背景图上
    createMarker(x, y) {
        console.log(x,y)
        var div = document.createElement('div')
        div.className = 'marker'
        div.id = 'marker'+this.banMa.length
        y = y,
        x = x,
        div.style.width = this.pointSize + 'px'
        div.style.height = this.pointSize + 'px'
        div.style.backgroundImage = 'url(' + this.pointColor + ')'
        div.style.position = 'absolute'
        div.style.left = x + 'px'
        div.style.top = y + 'px'
        document.getElementById('manager_detail').appendChild(div)
      },

效果如图