vue.directive来做的拖拽

自定义指令：
除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。详细可以看vue官方文档

<div class="box" v-drag="isDrag">
 <p class="setting-btn"></p>
  <p class="boxP">患者信息</p>
</div>

<script>
  import Vue from 'vue' 
  Vue.directive('drag', {
    bind(el, {value, arg, modifiers}) {
      console.log(value, arg, modifiers)
      el._value = value;
      el._isDrag = false;
      el.addEventListener('mousedown', function(e) {
 
        if (!el._value) return;
 
        el._isDrag = true;
        el._x = e.clientX - el.offsetLeft;
        el._y = e.clientY - el.offsetTop;
 
        e.preventDefault();
      });
      document.addEventListener('mousemove', function(e) {
        if (el._isDrag) {
          let l = e.clientX - el._x;
          let t = e.clientY - el._y;
 
          if (modifiers.limit) {
            if (l < 0) {
              l = 0;
            }
            if (t < 0) {
              t = 0;
            }
          }
 
          el.style.left = l + 'px';
          el.style.top = t + 'px';
        }
      });
      document.addEventListener('mouseup', function(e) {
        el._isDrag = false;
      });
    },
 
    componentUpdated(el, {value}) {
      console.log('更新了', value);
      el._value = value;
    }
  });
export default {
    data() {
      return {
        isDrag: true,
      }
    }
}
</script>

.setting-btn {
    position: absolute;
    width: 31px;
    height: 31px;
    top: 15px;
    left: -1px;
    background: transparent url(../../../../static/images/admin.png) no-repeat;
  }
  .box {
    position: absolute;
    left: 23px;
    top: 750px;
    width: 119px;
    height: 57px;
    background:#999;
    text-align: center;
    line-height: 57px;
    border-radius: 40px;
    opacity: 0.6;
    .boxP {
      color: #0055C3;
      width: 100px;
      height: 40px;
      background: #fff;
      border-radius: 40px;
      line-height: 40px;
      margin: 0 auto;
      margin-top: 10px;
    }
  }