关于鼠标移动拖拽

1. 盒子跟着鼠标拖拽移动

拖拽三要素：

• onmousedown 鼠标按下事件
• onmousemove 鼠标移动事件
• onmouseup 鼠标离开事件

效果实现：盒子跟着鼠标拖动而移动

效果图：

实现代码：

<template>
 <div class="box">
   <div class="inner" v-drag>盒子</div>
 </div>
</template>

<script>
 directives: {
   drag (el) {
       let cx;
       let cy;
       let offsetLeft;
       let offsetTop;
       let onDrag = false
    el.onmousedown = function(e) {
        cx = e.clientX
        cy = e.clientY
        offsetLeft = el.offsetLeft
        offsetTop = el.offsetTop
        onDrag = true
        document.onmousemove = function(e) {
            if(onDrag) {
                el.style.left = e.clientX + offsetLeft - cx +'px'
                el.style.top = e.clientY + offsetTop - cy + 'px'
            }
        }
        document.onmouseup = function(e) {
            if(onDrag) {
             onDrag = false
             document.onmouseomve = null
            }
        }
    }
   }
 }
</script>

2. 鼠标拖拽改变盒子宽度

效果图：

实现代码：

directives: {
    moveWidth(el) {
      let cx;
      let cy;
      let offsetWidth;
      let offsetHeight;
      let onDrag = false;
      el.onmousedown = function(e) {
        cx = e.clientX;
        cy = e.clientY;
        offsetWidth = el.offsetWidth;
        offsetHeight = el.offsetHeight;
        onDrag = true;
        document.onmousemove = function(e) {
          if (onDrag) {
            el.style.width = e.clientX - cx + offsetWidth + "px";
            el.style.height = e.clientY - cy + offsetHeight + "px";
          }
        };
        document.onmouseup = function(e) {
          if (onDrag) {
            document.onmouseomve = null;
            onDrag = false;
          }
        };
      };
    }
}