vue div拖拽移动

实现div弹出框的拖拽功能

标签加个 v-drag属性

<div v-drag class="numKeyboardsBox" ref="numKeyboardsBox" v-show="numKeyboarInfo.isShowFlag" :style="numKeyboarInfo.styleObject">
  <numKeyboards id="keyboards" ref="keyboards" :keyboardtext="numKeyboarInfo.keyboardtext" @updatekey="numKeyboardsGetValueFn" @enterClick="numKeyboardsEnterClickFn" />
</div>

实现：

method:{
,,,
},
directives: {
    drag: {
      // 指令的定义
      bind: function (el) {
          let odiv = el;   //获取当前元素
          el.onmousedown = (e) => {
              //算出鼠标相对元素的位置
              let disX = e.clientX - odiv.offsetLeft;
              let disY = e.clientY - odiv.offsetTop;
              let left = '';
              let top = '';
              document.onmousemove = (e)=>{
                  //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                  left = e.clientX - disX;
                  top = e.clientY - disY;
                  var docWidth = document.body.clientWidth//网页可见宽
                  var docHeight = document.body.clientHeight//网页可见高
                  if(top>docHeight-210){//超下边界(键盘DIV长宽分别为 295px、210px)
                    top = docHeight-210
                  }
                  if(top<0){//超上边界
                    top=0
                  }
                  if(left>docWidth-295){//超右边界
                    left = docWidth-295
                  }
                  if(left<0){//超左边界
                    left=0
                  }
                  //绑定元素位置到positionX和positionY上面
                  //移动当前元素
                  odiv.style.left = left + 'px';
                  odiv.style.top = top + 'px';
              };
              document.onmouseup = (e) => {
                  document.onmousemove = null;
                  document.onmouseup = null;
              };
          };
      }
    }
  },

来自博客：https://www.cnblogs.com/mazhenyu/p/12384338.html