自定义指令

Vue.directive('drag',//自定义指令          
  {
    bind: function (el, binding) {
      let oDiv = el; //当前元素
      oDiv.onmousedown = function (e) {
        //鼠标按下，计算当前元素距离可视区的距离
        let disX = e.clientX - oDiv.offsetLeft;
        let disY = e.clientY - oDiv.offsetTop;
        document.onmousemove = function (e) {
          //通过事件委托，计算移动的距离 
          let l = e.clientX - disX;
          let t = e.clientY - disY;
          // 防止越界
          if (l < 0) {
            l = 0
          }
          if (l > document.documentElement.clientWidth - oDiv.getBoundingClientRect().width) {
            l = document.documentElement.clientWidth - oDiv.getBoundingClientRect().width
          }
          if (t < 0) {
            t = 0
          }
          if (t > document.body.clientHeight - oDiv.getBoundingClientRect().height) {
            t = document.body.clientHeight - oDiv.getBoundingClientRect().height - 40
          }
          //移动当前元素 
          oDiv.style.left = l + 'px';
          oDiv.style.top = t + 'px';
        };
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      };
    }
  }

image.png

一、clientX、clientY
点击位置距离当前body可视区域的x，y坐标

二、pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度

三、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标

四、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标

五、x、y
和screenX、screenY一样

通过监听鼠标事件

    :class="['music_wrapper',isMin?'min-player':'max-player']"
    id="music_player"
    @mousedown="handlemousedown"
  >
    <!-- 最大化 -->
    <div class="max-music-player" v-if="!isMin">
      <VueAplayer
        autoplay
        ref="vueplayer"
        :music="cur_music"
        @pause="handleVueAplayerPlayOrPause(false)"
        @play="handleVueAplayerPlayOrPause(true)"
        @timeupdate="onTimeupdate"
      ></VueAplayer>
      <i class="iconfont icon-diyiyeshouyeshangyishou" @click="changeCurrentIndex(-1)"></i>
      <i class="iconfont icon-zuihouyiyemoyexiayishou" @click="changeCurrentIndex(1)"></i>
      <i class="iconfont icon-guanbi"></i>
    </div>
    <!-- 最小化 -->
    <div class="min-music-player" v-else>
      <i class="iconfont icon-yinle"></i>
    </div>
  </div>



  handlemousedown(e: any) {
    // 当前元素
    let music_player: any = document.querySelector("#music_player");
    //  鼠标按下，计算当前元素距离可视区的距离
    let disX = e.clientX - music_player.offsetLeft;
    let disY = e.clientY - music_player.offsetTop;
    this.isDrag = true;
    let startTime = e.timeStamp;
    document.onmousemove = (el: any) => {
      if (this.isDrag) {
        let moveX = el.clientX - disX;
        let moveY = el.clientY - disY;
        if (moveX < 0) {
          moveX = 0;
        }
        if (
          moveX >
          document.documentElement.clientWidth -
            music_player.getBoundingClientRect().width
        ) {
          moveX =
            document.documentElement.clientWidth -
            music_player.getBoundingClientRect().width;
        }
        if (
          moveY >
          document.documentElement.clientHeight -
            music_player.getBoundingClientRect().height
        ) {
          moveY =
            document.documentElement.clientHeight -
            music_player.getBoundingClientRect().height;
        }
        if (moveY < 0) {
          moveY = 0;
        }
        music_player.style.left = moveX + "px";
        music_player.style.top = moveY + "px";
      }
    };
    document.onmouseup = (el: any) => {
      const that = this;
      this.isDrag = false;
      let endTime = el.timeStamp;
      if (endTime - startTime < 150) {
        /**
         * 当鼠标点击抬起间隔不超过150时则为点击事件   此时判断当前点击元素包含的className来判断是否执行打开关闭事件
         */
        if (this.isMin && el.target.className.includes("icon-yinle")) {
          this.getMusicPlayMax(false);
        } else if (el.target.className.includes("icon-guanbi")) {
          this.getMusicPlayMax(true);
        }
      }
    };
  }