div元素鼠标按下可拖动

div元素鼠标按下拖动效果

html部分

 <div
    @mousedown="getDown($event)"
    @mouseup="getUp($event)"
    id="RWXX"
  >

移动方法：

   getDown(e) {
      let that = this
      //鼠标按下事件
      let box = document.getElementById('RWXX')// 对应div id
      let x = e.pageX / that.scale - box.offsetLeft
      let y = e.pageY / that.scale - box.offsetTop
      document.onmousemove = function(ev) {
        box.style.left = ev.pageX / that.scale - x + 'px'
        box.style.top = ev.pageY / that.scale - y + 'px'
        document.onmouseup = function(ev) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    },
    
    getUp() {
      document.onmouseup = function(ev) {
        document.onmousemove = null
        document.onmouseup = null
      }
    },

PS：不同的显示比例不同 浏览器缩放也会有所影响，获取当前页面的缩放比例，使拖动的时候不论是什么比例显示，都可以丝滑拖动

 let x = e.pageX / that.scale - box.offsetLeft// that.scale  是页面缩放比例

---

获取页面缩放比例方法：

setScreen() {
      let visibleWidth = window.innerWidth
      let visibleHeight = window.innerHeight
      var widthPercentage = (1.0 * visibleWidth) / 1920
      var heightPercentage = (1.0 * visibleHeight) / 1080 // 1920*1080 屏幕的分辨率
      this.scale = Math.min(widthPercentage, heightPercentage) // this.scale屏幕的缩放系数
      this.$store.commit('setScale', this.scale)// 存放在vuex  便于其他页面获取
    },