vue div拖拽

　　在前端开发中，拖拽是非常常见的一种方式，但是之前感觉拖拽实现起来比较麻烦，一直未深入研究，现在整理了几个实现方式：

1、原生方式

html部分

<div class="div" v-drag ></div> 

 

js部分

methods：{}，
    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;
                        //绑定元素位置到positionX和positionY上面
                        //移动当前元素
                        odiv.style.left = left + 'px';
                        odiv.style.top = top + 'px';
                    };
                    document.onmouseup = (e) => {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                };
            }
        }
    }

 

2、vue 组件 vue-drag-resize 

 vue-drag-resize 这个组件不但能够实现拖拽功能，还可以实现缩放功能。

加载：

npm i -s vue-drag-resize

使用：

 <template>
     <div id="app">
          <vue-drag-resize></vue-drag-resize>
     </div>
  </template>
  import VueDragResize from 'vue-drag-resize';
  export default {
      name: 'app',
      components: {
          VueDragResize
      },
  }        

详细参数及方法介绍可参考文档 https://www.npmjs.com/package/drag-resize-vue 或博客https://blog.csdn.net/weixin_33957648/article/details/91423751