vue 拖拽 vue-drag-it-dude/ vuedraggable / VueDragResize

 组件一:  vue-drag-it-dude

1> 下载插件: 

npm/cnpm install vue-drag-it-dude --save

2>组件引入:

//局部, 谁用谁引入
import DragItDude from 'vue-drag-it-dude';

//main.js 全局
import VueDragItDude from 'vue-drag-it-dude';
Vue.component('vue-drag-it-dude',FooterPage) // 注册底部全局组件

3>使用(配置文档-> 文档链接)

  <vue-drag-it-dude class="drag">
     <div>内容</div>
  </vue-drag-it-dude>

组件二 :  vuedraggable(表格的顺序上下拖动)

1> 下载插件: 

npm/cnpm i -S vuedraggable
或者 yarn add vuedraggable 安装组件

2>组件引入:

import VueDragAble from 'vuedraggable'

3>使用(配置文档->文档链接)

<vue-drag-able group="people">
  <div class="drag2" v-for="(item,index) in 3" :key="item.id">
          内容 + {{index}}      //key 要写
  </div>
</vue-drag-able>

//多个draggable容器之间相互拖拽，需要配置 group 值 为同一个 如: group="people"
//加 header slot / footer slot 此时需要在draggable组件上加上draggable=".item"
//通过设置可拖拽元素的class，显示元素内容可拖拽

<vue-drag-able draggable=".item">
   <div class="item"> 可以拖拽</div>
   <div> 内容</div>
</vue-drag-able>


// vuedraggable 组件式封装,将可拖动元素放进了 transition-group ;如下:
 <vue-drag-able group="people"> //也可不写
      <transition-group>
        <div class="drag2" v-for="item in 3" :key="item.id">
          内容
        </div>
      </transition-group>
 </vue-drag-able>

组件三 : VueDragResize(图片缩放大小)

1> 下载插件: 

npm/cnpm install vue-drag-resize

2>组件引入:

//谁用谁引入
import VueDragResize from 'vue-drag-resize'  

//或者 全局 main.js  //缩放、拖拽

import VueDragResize from 'vue-drag-resize' 
Vue.component('vue-drag-resize', VueDragResize)

// 可选择导入默认样式
import 'vue-drag-resize/dist/VueDraggableResizable.css'

3>使用:  (配置文档链接 -> 文档链接)

//为了缩放图片，所以给img标签外套一个div,动态获取宽高，宽高就是VueDragResize的宽高一样这样就可以实现缩放大小
<div id="resize">

//缩放功能主要是缩放VueDrangResize标签
<vue-drag-resize :w="200" :h="200"  @dragging="onDrag" @resizing="onResize">
　　<!-- 图片缩放 -->　将这个div的宽高动态设置==VueDrangResize的宽高，这样可实时完成缩放

　　<div class="box" :style="{动态样式 width:this.width +'px'}">
　　我这写的是本地的图片，图片可以动态获取
　　　　<img src="../imgs/time.png">
　　</div>
</vue-drag-resize>
</div>

  //事件
   methods: {
    //拖拽
    onDrag: function (x, y) {
      this.x = x
      this.y = y
    },
   //伸缩
    onResize: function (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
    },
  
  }

:w 默认宽度
:h 默认高度
:x="50" 默认水平坐标 注意相对元素是谁
:y="50" 默认垂直最表 注意相对元素是谁
:min-width="50" 最小宽度
:min-height="50" 最小高度
:parent="true" 限制不能拖出父元素
parent=".p-event" 限制不能拖出class为p-event的元素
:grid 水平和垂直移动 每次分别能够走多少像素
class-name 自定义组件class 下面定义一个dragging1