vue界面可视窗口随便移动

vue界面可视窗口随便移动

HTML部分的重点

@mousedown=“mouseDownHandleelse($event)"@mouseup="mouseUpHandleelse($event)”

• 上面的代码方法放到要移动的div块上面去，其他不要管。

css部分

给div边框一个宽高确定它的大小和位置position：fixed；

select {
     
      width: 300px;
      height: 550px;
      z-index: 1000;
      position: fixed;
      top: 150px;
      left: 43%;
      background: #c3bdbdd6;}

javascript部分

mouseDownHandleelse (event) {
     
      this.moveDataelse.x = event.pageX - this.$refs.kongtiao.offsetLeft
      this.moveDataelse.y = event.pageY - this.$refs.kongtiao.offsetTop
      event.currentTarget.style.cursor = 'move'
      window.onmousemove = this.mouseMoveHandleelse
    },
    mouseMoveHandleelse (event) {
     
      let moveLeft = event.pageX - this.moveDataelse.x + 'px'
      let moveright =  event.pageX - this.moveDataelse.x 
      let moveTop = event.pageY - this.moveDataelse.y + 'px'
      let moveBottom = event.pageY - this.moveDataelse.y
      var bodywith = window.screen.availWidth;         //网页可见区域宽(body)
      var bodyheight = window.screen.availHeight;         //网页可见区域高(body)
      if(moveLeft<0+'px'){
     
        moveLeft=0+'px'
      }
      if(moveright+300>=bodywith){
     //300是我的容器的宽度
        moveLeft=bodywith-330+'px'
      }
      if(moveTop<0+'px'){
     
        moveTop=0+'px'
      }
      if(moveBottom+650>bodyheight){
     //650是我容器的高度
        moveTop=bodyheight-650+'px'
      }
      this.$refs.kongtiao.style.left = moveLeft
      this.$refs.kongtiao.style.top = moveTop
    },
    mouseUpHandleelse (event) {
     
      window.onmousemove = null
      event.currentTarget.style.cursor = 'move'
    },

javascript修改事项

1. 将javascript的300更改为你div的大小，
2. javascript的650更改为你div的高度，
3. 完成上面两步后基本就可以运行了！
4. 注意要点！给div宽高，给div设置位置和层级，js部分修改宽高！