html制作悬浮图标可以拖拽

如上图所示，制作一个悬浮图标，可以点击，可以拖拽到其他地方，兼容电脑手平板等。

 <div style="display: inline;z-index:20" @click="showMessage" v-if="rightFlags.shareRight">
      <img :src="require('@/assets/monitor/send.png')" style="width: 60px;position: fixed;"
        :style="{ bottom: sendPageInfo.bottom + 'px', right: sendPageInfo.right + 'px', cursor: sendPageInfo.active ? 'move' : 'pointer' }"
        @mousedown.stop="startDragging" @mouseup.stop="stopDragging" @mousemove.stop="dragging"
        @touchstart="startDragging" @touchend="stopDragging" @touchmove="dragging" id="imgdraggable">
    </div>

PC端的话可以使用 mouseXXXX系列，平板手机的话可以使用 touchXXX系列。

检查是哪种类型代码

let agent = window.navigator.userAgent.toLowerCase();
    if (["android", "iphone", "symbianos", "windows phone", "ipad", "ipod"].some(i => agent.indexOf(i) > 0)) {
      this.sendPageInfo.isPhone = true;
    } else {
      this.sendPageInfo.isPhone = false;
    }

 

拖拽代码

dragging(e) {
      if (this.sendPageInfo.active) {
        e.preventDefault();

        this.sendPageInfo.hasDrag = true;

        if (this.sendPageInfo.isPhone) {
          this.sendPageInfo.posX = e.touches[0].clientX - this.sendPageInfo.offsetX;
          this.sendPageInfo.posY = e.touches[0].clientY - this.sendPageInfo.offsetY;

          this.sendPageInfo.bottom = this.clientHeight - this.sendPageInfo.posY
          this.sendPageInfo.right = this.clientWidth - this.sendPageInfo.posX
        } else {
          this.sendPageInfo.posX = e.clientX - this.sendPageInfo.offsetX;
          this.sendPageInfo.posY = e.clientY - this.sendPageInfo.offsetY;

          this.sendPageInfo.bottom = this.clientHeight - this.sendPageInfo.posY
          this.sendPageInfo.right = this.clientWidth - this.sendPageInfo.posX
        }
      }

    },
    startDragging(e) {
      this.sendPageInfo.active = true;

      if (this.sendPageInfo.isPhone) {
        this.sendPageInfo.posX = this.clientWidth - this.sendPageInfo.right
        this.sendPageInfo.posY = this.clientHeight - this.sendPageInfo.bottom

        this.sendPageInfo.offsetX = e.touches[0].clientX - this.sendPageInfo.posX;
        this.sendPageInfo.offsetY = e.touches[0].clientY - this.sendPageInfo.posY;
      } else {
        window.addEventListener('mousemove', this.dragging)

        this.sendPageInfo.posX = this.clientWidth - this.sendPageInfo.right
        this.sendPageInfo.posY = this.clientHeight - this.sendPageInfo.bottom

        this.sendPageInfo.offsetX = e.clientX - this.sendPageInfo.posX;
        this.sendPageInfo.offsetY = e.clientY - this.sendPageInfo.posY;
      }



    },
    stopDragging(e) {
      this.sendPageInfo.active = false;
      if (this.sendPageInfo.isPhone) this.sendPageInfo.hasDrag = false;

    },
    showMessage() {
      if (this.sendPageInfo.hasDrag) {
        this.sendPageInfo.hasDrag = false;
      } else {
        this.showSendPersonFlag = true;
      }
    },

hasDrag 是PC端的时候拖拽和点击会有冲突，所以用这个当一个阻止标识。