可拖拽弹出框

效果

父组件

    <drag-window v-if="showDrag" @close="closeDrag">
      <div class="canvas">
        <drawingBoard v-if="onShow"></drawingBoard>
        <showingBoard v-else></showingBoard>
        <button class="btn" @click="changeStatus">切换状态</button>
      </div>
    </drag-window>

子组件

  <div class="drag" >
    <div id="lucky"
         @mousedown="down" @touchstart="down"
         @mousemove="move" @touchmove="move"
         @mouseup="end" @touchend="end" @click="click">
      <a-button @click="onClose" style="float: right">关闭</a-button>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>

<script>
  export default {
    name: 'Error',
    data() {
      return {
        flags: false,
        position: { x: 0, y: 0 },
        nx: '',
        ny: '',
        dx: '',
        dy: '',
        xPum: '',
        yPum: '',
      }
    },
    methods: {
      onClose () {
        this.$emit('close')
      },
      // 实现移动端拖拽
      down(){
        var moveDiv = document.getElementById('lucky')
        this.flags = true;
        var touch;
        if(event.touches){
          touch = event.touches[0];
        }else {
          touch = event;
        }
        this.position.x = touch.clientX;
        this.position.y = touch.clientY;
        this.dx = moveDiv.offsetLeft;
        this.dy = moveDiv.offsetTop;
      },
      move(){
        var moveDiv = document.getElementById('lucky')
        if(this.flags){
          var touch ;
          if(event.touches){
            touch = event.touches[0];
          }else {
            touch = event;
          }
          this.nx = touch.clientX - this.position.x;
          this.ny = touch.clientY - this.position.y;
          this.xPum = this.dx+this.nx;
          this.yPum = this.dy+this.ny;
          moveDiv.style.left = this.xPum+"px";
          moveDiv.style.top = this.yPum +"px";
          //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
          event.preventDefault();
        }
      },
      //鼠标释放时候的函数
      end(){
        this.flags = false;
        // 鼠标释放的时候从这里判断块是否被拖到窗口外变成负值，从而进行恢复
      },
      click() {
        console.log('click')
      }
    }
  }
</script>

<style lang="less" scoped>
  .drag {
    #lucky {
      width: 1000px;
      height: 500px;
      background:#999999;
      position: fixed;
      top: 6rem;
      right: 0;
      z-index: 20070;
    }
  }
</style>