vue div拖拽【转】

vue div拖拽

 

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

1、原生方式

html部分

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

 

js部分

 1 methods：{}，
 2     directives: {
 3         drag: {
 4             // 指令的定义
 5             bind: function (el) {
 6                 let odiv = el;   //获取当前元素
 7                 el.onmousedown = (e) => {
 8                     //算出鼠标相对元素的位置
 9                     let disX = e.clientX - odiv.offsetLeft;
10                     let disY = e.clientY - odiv.offsetTop;
11                     let left = '';
12                     let top = '';
13                     document.onmousemove = (e)=>{
14                         //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
15                         left = e.clientX - disX;    
16                         top = e.clientY - disY;
17                         //绑定元素位置到positionX和positionY上面
18                         //移动当前元素
19                         odiv.style.left = left + 'px';
20                         odiv.style.top = top + 'px';
21                     };
22                     document.onmouseup = (e) => {
23                         document.onmousemove = null;
24                         document.onmouseup = null;
25                     };
26                 };
27             }
28         }
29     }

 

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