javaScript使用拖拽Api 开发dom全屏随意拖动

随意拖动

javaScript使用拖拽Api 开发dom全屏随意拖动

    dragstart (e) {
      offsetX = e.offsetX
      offsetY = e.offsetY
    },
    drag (e) {
      let x = e.pageX
      let y = e.pageY
      if (x === 0 && y === 0) {
        return // 不处理拖动最后一刻X和Y都为0的情形
      }
      x -= offsetX
      y -= offsetY
      this.$refs.minimizeBox.style.left = x + 'px'
      this.$refs.minimizeBox.style.top = y + 'px'
    }

 <div draggable='true' @dragstart="dragstart" @drag="drag" class="minimize-box" v-show="minimize" ref="minimizeBox">-</div>

  .minimize-box{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #0078ff;
    color: #FFFFFF;
    position: fixed;
    top: 20%;
    right: 5%;
    text-align: center;
    line-height: 50px;
    cursor: pointer;
    z-index: 10;
  }