随鼠标移动元素

<div ref="toolbar" class="toolbar"  @touchmove.stop.prevent="touchmove">
</div>
touchmove (e) {
        let ref = this.$refs['toolbar']
        let touches = e.changedTouches[0]
        let x = touches.clientX || touches.pageX || 0
        let y = touches.clientY || touches.pageY || 0
        x = x < 0 ? 0 : x
        x = x > this.clientWidth - 50 ? this.clientWidth - 50 : x
        y = y < 0 ? 0 : y
        y = y > this.clientHeight - 50 ? this.clientHeight - 50 : y
        ref.style.left = x + 'px'
        ref.style.top = y + 'px'
      },

pc端

<div  ref="robotImg"
      @mousedown.stop.prevent = 'moveRobot'
    ></div>
moveRobot (e) {
      let odiv = this.$refs['robotImg']
      var event = window.event || e
      // 获取屏幕中可视化的宽高的坐标
      var dx = event.clientX - odiv.offsetLeft
      var dy = event.clientY - odiv.offsetTop
      // 实时改变目标元素odiv的位置
      document.onmousemove = function (e) {
        var event = window.event || e
        odiv.style.left = event.clientX - dx + 'px'
        odiv.style.top = event.clientY - dy + 'px'
      }
      // 抬起停止拖动
      document.onmouseup = function () {
        document.onmousemove = null
        document.onmouseup = null
      }
    }

解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突

<template>
  <div  id="robotBox">
    <div id="chatbox" ref="chatbox">
      <div class="wrap-drag">
        <div class="robot-name">
          <div class="name">小微老师</div>
          <div class="close" @click='hideRobot'>
            <a href="#" class="box-close">
              <span class="close-img"></span>
            </a>
          </div>
        </div>
        <div class="chat-content">
          <iframe
            id="robot"
            src="http://localhost:8080/#/robot?user_id='35576c99-15bc-4292-96ff-b8317c83125a'"
            frameborder="0"
          ></iframe>
        </div>
        <label id="robot_label"></label>
      </div>
    </div>

    <div
      id="chatBtn"
      class="chat-btn"
      ref="robotImg"
      data-toggle="tooltip"
      @click='showRobot'
      v-drag
      data-flag = "true"
    >
      <span class="btn-img" id="chat-btn-icon"></span>
    </div>
  </div>
</template>
<script>
export default{
  methods: {
    hideRobot () {
      this.$refs.chatbox.style.left = '-403px'
    },
    showRobot () {
      let isClick = document.getElementById('chatBtn').getAttribute('data-flag');
      if(isClick !== 'true') {
        return false
      }
      this.$refs.chatbox.style.left = '0'
    }
  },
  directives: {
     drag: {
        // 指令的定义
        bind: function (el) {
          let odiv = el;  //获取当前元素
          let firstTime='',lastTime='';
          odiv.onmousedown = (e) => {
            document.getElementById('chatBtn').setAttribute('data-flag',false)
            firstTime = new Date().getTime();
            var event = window.event || e
            // 获取屏幕中可视化的宽高的坐标
            var dx = event.clientX - odiv.offsetLeft
            var dy = event.clientY - odiv.offsetTop
            const num = 2
            // 实时改变目标元素odiv的位置
            document.onmousemove = function (e) {
              odiv.style.transition = '';
              var event = window.event || e;
              let domLeft = event.clientX - dx;
              let domTop = event.clientY - dy;
              let clientWidth = document.body.clientWidth - odiv.offsetWidth - num;
              let clientHeight = document.body.clientHeight - odiv.offsetHeight - num;
              (domLeft < num) && (domLeft = num);
              (domLeft > clientWidth) && (domLeft = clientWidth);
              (domTop < num) && (domTop = num);
              (domTop > clientHeight) && (domTop = clientHeight);

              odiv.style.left = domLeft + 'px'
              odiv.style.top = domTop + 'px'
            }
            // 抬起停止拖动
            document.onmouseup = function () {
              odiv.style.transition = 'left 0.5s'
              let clientWidth = document.body.clientWidth 
              if(odiv.offsetLeft < clientWidth / 2){
                odiv.style.left = num + 'px'
              }else{
                odiv.style.left = clientWidth - odiv.offsetWidth - num + 'px'
              }
              document.onmousemove = null
              document.onmouseup = null
              // onmouseup 时的时间，并计算差值
              lastTime = new Date().getTime();
              if( (lastTime - firstTime) < 200){
                document.getElementById('chatBtn').setAttribute('data-flag',true)
              }
            }
          };
        }
      }
    }
}
</script>
<style scoped>
#chatbox {
  position: fixed;
  bottom: 0;
  left: -403px;
  z-index: 10000;
  top: 0;
  height: 100%;
  width: 350px;
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}

#robotBox,
.wrap-drag {
  height: 100%;
}

.chat-content {
  height: calc(100% - 36px);
}

.robot-name {
  position: relative;
  height: 36px;
  line-height: 36px;
  width: 100%;
  background-color: #469cff;
  border-right: 1px solid #469cff;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

.robot-name .name {
  color: #fff;
  font-size: 16px;
  float: left;
  margin: 0 0 0 10px;
}

.robot-name .close,
.robot-name .close a {
  position: relative;
  width: 36px;
  height: 36px;
  color: #fff;
}

.robot-name .close {
  font-size: 14px;
  float: right;
  margin: 0;
}

.robot-name .close a {
  display: block;
  cursor: pointer;
  text-decoration: none;
}
.close{
  opacity: 1;
}
#chatbox a {
  text-decoration: none;
  color: #469cff;
}

.close a .close-img {
  position: absolute;
  display: block;
  top: 12px;
  right: 12px;
  width: 12px;
  height: 12px;
  cursor: pointer;
  overflow: hidden;
}

.close a .close-img:after,
.close a .close-img:before {
  content: "";
  position: absolute;
  height: 2px;
  width: 100%;
  top: 50%;
  left: 0;
  margin-top: -1px;
  background: #fff;
}

.close a .close-img:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.close a .close-img:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#robot {
  width: 100%;
  height: 100%;
}

#chatbox label {
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  display: block;
  position: absolute;
  z-index: 9999;
  cursor: ew-resize !important;
  left: 350px;
  background: transparent;
}
.chat-btn,
.chat-btn .chat-btn-inner {
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.chat-btn {
  width: 53px;
  height: auto;
  position: fixed;
  top: 70%;
  left: 2px;
  z-index: 999;
}
.chat-btn .btn-img {
  width: 53px;
  height: 53px;
  background-image: url(../assets/images/robot-icon.png);
  background-size: 100% 100%;
  display: block;
  background-repeat: no-repeat;
}
</style>