web拖拽

思路

图示

e.clientX1

点击时的位置相对于浏览器最左边的距离(蓝点)

drag.offsetLeft

体左边框相对于浏览器最左边的距离(绿点)

diffX

鼠标点击物体那一刻相对于物体左侧边框的距离(蓝点-绿点)

moveLeft

var moveLeft = e.clientX - diffX

基础拖拽

html

html

  <div id='drag'>drag</div>

css

    *{
      padding: 0;
      margin: 0;
    }
    #drag {
      position: absolute; //left和top可变
      width: 100px;
      height: 100px;
      background-color: red;
      cursor: move;
    }

js

  drag()
  function drag(){
    var drag = document.getElementById('drag')
     // 点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)
    drag.onmousedown = function(e){
      // clientX: 是目标点距离浏览器可视范围的X轴坐标，鼠标点击地点距离浏览器最左侧的距离
      // offsetLeft:    position: absolute;元素div距离浏览器可视范围的宽
      var diffX = e.clientX - drag.offsetLeft
      var diffY = e.clientY - drag.offsetTop

      document.onmousemove = function(e){
        var left = e.clientX - diffX
        var top = e.clientY - diffY
        drag.style.left = left + 'px'
        drag.style.top = top + 'px'
      }
      document.onmouseup = function(e){
        this.onmousemove = null;
        this.onmouseup = null
      }
    }
  }

vue

    <div id='drag' 
          ref="drag" 
          @mousedown="handleMousedown($event)" 
          @mouseup="handleMouseUp($event)">
    </div>

      data() {
        return {
          diffX: 0,
          diffY: 0
        }
      },
      methods: {
        handleMousedown(event) {
          this.diffX = event.clientX - this.$refs.drag.offsetLeft
          this.diffY = event.clientY - this.$refs.drag.offsetTop
          window.onmousemove = this.handleMousemove
        },
        handleMousemove(event) {
          let moveLeft = event.clientX - this.diffX
          let moveTop = event.clientY - this.diffY
          this.$refs.drag.style.left = moveLeft + 'px'
          this.$refs.drag.style.top = moveTop + 'px'
        },
        handleMouseUp(event) {
          window.onmousemove = null
        }
      }
    })

边界条件，不超出浏览器范围

        if(moveLeft <0){
          moveLeft = 0
        }else if(moveLeft > window.innerWidth - drag.offsetWidth){
          moveLeft = window.innerWidth - drag.offsetWidth
        }

        if(moveTop <0){
          moveTop = 0
        }else if(moveTop > window.innerHeight - drag.offsetHeight){
          moveTop = window.innerHeight - drag.offsetHeight
        }

          if (moveLeft < 0) {
            moveLeft = 0
          } else if (moveLeft > window.innerWidth - this.$refs.drag.offsetWidth) {
            moveLeft = window.innerWidth - this.$refs.drag.offsetWidth
          }

          if (moveTop < 0) {
            moveTop = 0
          } else if (moveTop > window.innerHeight - this.$refs.drag.offsetHeight) {
            moveTop = window.innerHeight - this.$refs.drag.offsetHeight
          }