可拖拽页面按钮

<template>
  <div
    class="music_btn_box"
    @touchstart="dragMouseDown"
    @touchmove="elementDrag"
    @touchend="elementEnd"
    style="right: 0px; bottom: 150px"
    @click="f0"
    ref="musicRef"
    v-if="showMusicBtn"
  >
    <img class="music_icon_box" :src="require('./assets/music.png')" />
  </div>
</template>

<script>
import { defineComponent, ref, reactive, toRefs, onBeforeUnmount } from "vue";
import { request } from "./utils/request";
//@click="f0"
export default defineComponent({
  setup() {
    const musicRef = ref(null);
    const state = reactive({
      x: 0,
      y: 150,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 150,
      closeFlag: false,
    });
    function dragMouseDown(event) {
      try {
        let e = event.changedTouches[0];
        state.startX = e.pageX;
        state.startY = e.pageY;
      } catch (error) {
        console.log(error);
      }
    }

    function elementDrag(event) {
      try {
        event.preventDefault();
        if (event.touches.length > 0) {
          let dWidth = document.documentElement.clientWidth || 150;
          let dHeight = document.documentElement.clientHeight || 500;
          let offsetX = event.touches[0].pageX - state.startX;
          let offsetY = event.touches[0].pageY - state.startY;
          let x = state.x - offsetX;
          let y = state.y - offsetY;
          if (x < 0) {
            x = 0;
          }
          if (x > dWidth / 2) {
            x = dWidth / 2;
          }
          if (y < 0) {
            y = 0;
          }
          if (y > dHeight - 100) {
            y = dHeight - 100;
          }
          musicRef.value.style.right = x + "px";
          musicRef.value.style.bottom = y + "px";
          state.endX = x;
          state.endY = y;
        }
      } catch (error) {
        console.log(error);
      }
    }

    function elementEnd(event) {
      try {
        // let dWidth = document.body.clientWidth || document.documentElement.clientWidth
        let e = event.changedTouches;
        state.x = state.endX;
        state.y = state.endY;
        state.closeFlag = false;
        state.startX = 0;
        state.startY = 0;
      } catch (error) {
        console.log(error);
      }
    }

    return {
      ...toRefs(state),
      dragMouseDown,
      elementDrag,
      musicRef,
      elementEnd,
    };
  },
});
</script>

<style lang="scss">
.music_btn_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 60px;
  height: 60px;
  // width: calc((100vw / 386) * 60);
  // height: calc((100vw / 386) * 60);
  border-radius: 50%;
  background: #ffffff;
  color: #333333;
  font-size: 23px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
  z-index: 199;
  .music_icon_box {
    width: 100%;
    height: 100%;
  }
}
.music_btn_Toast {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  top: 45vh;
  width: 100%;
  z-index: 9999;
  line-height: 1.5;
  white-space: wrap;

  .text-iun {
    max-width: 220px;
    background: rgba(0, 0, 0, 0.7);
    padding: 5px 8px;
    border-radius: 5px;
    max-height: 50vh;
    overflow-y: auto;
  }
}
</style>