实现效果

案列一：小机器人可以上下左右进行拖拽，并且可以点击

问题点：这里当点击拖拽机器人图标时候容易出现鼠标抬起后还可以继续拖拽（这里需要禁用img的拖拽属性加draggable="false"或者样式里面加 img { -webkit-user-drag: none}）

1, 使用自定义指令，创建拖拽代码 / directive / drag.js

import Vue from 'vue';
Vue.directive('drag', {
  bind: function (el) {
    const odiv = el;
    // 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
    const clientOffset = {};
    odiv.style.position = 'fixed';
    odiv.onmousedown = (e) => {
      const disX = e.clientX - odiv.offsetLeft;
      const disY = e.clientY - odiv.offsetTop;
      // 缓存 clientX clientY
      clientOffset.clientX = e.clientX;
      clientOffset.clientY = e.clientY;
      document.onmousemove = (e) => {
        const left = e.clientX - disX;
        const top = e.clientY - disY;
        odiv.style.left = left + 'px';
        odiv.style.top = top + 'px';
        // odiv 距离顶部的距离
        const dragDivTop = window.innerHeight - odiv.getBoundingClientRect().height;
        // odiv 距离左部的距离
        const dragDivLeft = window.innerWidth - odiv.getBoundingClientRect().width;
        // 边界判断处理
        // 2、超出顶部处理
        if (odiv.getBoundingClientRect().top <= 0) {
          odiv.style.top = '0px';
        }
        // 3、超出底部处理
        if (odiv.getBoundingClientRect().top >= dragDivTop) {
          odiv.style.top = dragDivTop + 'px';
        }
        // 4、超出右边边界区域处理
        if (odiv.getBoundingClientRect().left >= dragDivLeft) {
          odiv.style.left = dragDivLeft + 'px';
        }
        // 5、超出左边边界区域处理
        if (odiv.getBoundingClientRect().left <= 0) {
          odiv.style.left = '0px';
        }
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    };
    // 绑定鼠标松开事件
    odiv.addEventListener('mouseup', (event) => {
      const clientX = event.clientX;
      const clientY = event.clientY;
      if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
        return false
        // console.log('click 事件');
      } else {
        return false
        // console.log('drag 事件');
      }
    })
  }
});

2，在main.js里面引入

// 调用自定义指令
import "./directive/drag";

3，拖拽机器人的页面

    <!-- 实时显示当前的聊天信息 -->
    <div class="realTranslationInfos" v-drag>
      <div class="translationContent" v-if="realconversation && showMsg">
        <p v-if="showMsg.length > 1">
          <span ref="HTML" v-html="realconversation.voice"></span>
        </p>
        <p v-else>
          医生实时语音转译中...
        </p>
      </div>
      <div class="RealtranslationBox">
        <img draggable="false" @click="allconversationclik" src="../../assets/images/Realtranslation.png" alt="" width="123px" height="196px">
      </div>
      <div class="allconversationbox" v-show="showallConversation">
        <div class="contentinfos">
          <div class="closeconversation">
            <h4>全部聊天</h4>
            <i class="el-icon-close" @click="closeconversationEvent"></i>
          </div>
          <div class="conversationConbox" v-if="showMsg">
            <ul v-if="showMsg.length > 0">
              <li class="Chatconboxul" v-for="(item, index) in showMsg" :key="index">
                <span ref="HTML" v-html="item.voice || item.text"></span>
              </li>
            </ul>
            <ul v-else>
              <li>
                <span>医生实时语音转译中....</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</script>
	<style lang="scss" scoped>
	.realTranslationInfos {
      width: 400px;
      height: 200px;
      // background: red;
      position: absolute;
      bottom: 88px;
      right: 20px;
      // bottom: 122px;
      // right: -30px;
      .translationContent {
        min-height: 100px;
        line-height: 23px;
        width: 338px;
        padding: 18px 74px 19px 19px;
        background: #004CB3;
        opacity: 0.80;
        border-radius: 12px;
        color: #fff;
        position: absolute;
        right: 58px;
        bottom: 22px;
        z-index: 999;
      }
      .RealtranslationBox {
        display: flex;
        align-items: center;
        position: absolute;
        right: 2px;
        bottom: 5px;
        z-index: 999;
        img {
          cursor: pointer;
        }
      }
    }
	</style>
</script>

案列二： 该按钮可以上下拖拽，不能左右拖拽，并且可以点击。

代码如下

<template>
  <div ref="dragDiv" class="float-drag-button">
    <span>凯小默的博客</span>
  </div>
</template>

<script>

export default {
  mounted() {
    this.$nextTick(() => {
      // 获取DOM元素
      let dragDiv = this.$refs.dragDiv;
      // 缓存 clientX clientY 的对象: 用于判断是点击事件还是移动事件
      let clientOffset = {};
      // 绑定鼠标按下事件
      dragDiv.addEventListener("mousedown", (event) => {
        let offsetX = dragDiv.getBoundingClientRect().left; // 获取当前的x轴距离
        let offsetY = dragDiv.getBoundingClientRect().top; // 获取当前的y轴距离
        let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
        let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距
        console.log(offsetX, offsetY, innerX, innerY);
        // 缓存 clientX clientY
        clientOffset.clientX = event.clientX;
        clientOffset.clientY = event.clientY;
        // 鼠标移动的时候不停的修改div的left和top值
        document.onmousemove = function(event) {
          dragDiv.style.left = event.clientX - innerX + "px";
          dragDiv.style.top = event.clientY - innerY + "px";
          // dragDiv 距离顶部的距离
          let dragDivTop = window.innerHeight - dragDiv.getBoundingClientRect().height;
          // dragDiv 距离左部的距离
          let dragDivLeft = window.innerWidth - dragDiv.getBoundingClientRect().width;
          // 边界判断处理
          // 1、设置左右不能动
          dragDiv.style.left = dragDivLeft + "px";
          // 2、超出顶部处理
          if (dragDiv.getBoundingClientRect().top <= 0) {
            dragDiv.style.top = "0px";
          }
          // 3、超出底部处理
          if (dragDiv.getBoundingClientRect().top >= dragDivTop) {
            dragDiv.style.top = dragDivTop + "px";
          }
        };
        // 鼠标抬起时，清除绑定在文档上的mousemove和mouseup事件；否则鼠标抬起后还可以继续拖拽方块
        document.onmouseup = function() {
          document.onmousemove = null;
          document.onmouseup = null;
        };
      }, false);
      // 绑定鼠标松开事件
      dragDiv.addEventListener('mouseup', (event) => {
        let clientX = event.clientX;
        let clientY = event.clientY;
        if (clientX === clientOffset.clientX && clientY === clientOffset.clientY) {
          console.log('click 事件');
        } else {
          console.log('drag 事件');
        }
      })
    });
  }
};
</script>
<style lang="scss" scoped>
.float-drag-button {
  position: absolute;
  right: 0;
  top: 40%;
  z-index: 6666;
  padding: 13px;
  width: 42px;
  opacity: 1;
  background-color: #fff;
  border-radius: 8px 0px 0px 8px;
  box-shadow: 0px 2px 15px 0px rgba(9,41,77,0.15);
  cursor: move;
  span {
    font-size: 16px;
    color: #333333;
    line-height: 24px;
    user-select: none;
  }
}
</style>