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