vuedraggable---简单使用

起因，项目开发中，使用了vuedraggable，然后需要配合upload组件，进行上传后的图片拖拽排序，so,决定采用vuedraggable

网址： www.itxst.com/vue-draggab…

项目简介：

　　前端框架：VUE2.6

　　第三方UI：element-UI2.x

使用步骤：

1. 采用yarn、npm等工具安装vuedraggable安装包，

　　指令：yarn add vuedraggable         npm i -S vuedraggable

2. 项目全局引入或者局部引入，

　　VUE2.X： 

　　　　//导入draggable组件

　　　　import draggable from 'vuedraggable'

　　　　components: { draggable },

　　具体实现代码：

　　

1 　　　　　　<draggable class="clearfix" v-model="arr1" :move="onMove" @add="add1" @start="start" animation="300">
2               <p class="draggable_p" v-for="item,index of fromData.invoiceFiles" :key="item.imgId">
3                   <img  :src="urlPre+'/file/'+item.imgId" alt="" />
4                   <span @click="deleteImg(item.imgId)">X</span>
5               </p>
6             <el-upload
7                 :class="['upload-demo',fromData.invoiceFiles.length >= 8?'disUpload':'']"
8                 :show-file-list="false"
9                 :file-list="fromData.invoiceFilesList"
10                 :limit="8"
11                 ref="upload"
12                 :disabled="fromData.invoiceFiles.length >= 8"
13                 :on-success="handleSuccess"
14                 :on-change="changeHandler"
15                 accept=".jpg, .jpeg, .png"
16                 :before-upload="beforeUpload"
17                 :action="服务器地址"
18                 multiple>
19                 <i class="el-icon-plus avatar-uploader-icon">点击上传</i>
20               </el-upload>
21             </draggable>

数据：

data() { 
　　return { 
　　　　//定义要被拖拽对象的数组 
　　　　arr1: [ 
　　　　{ id: 1, name: "www.itxst.com" }, 
　　　　{ id: 2, name: "www.jd.com" }, 
　　　　{ id: 3, name: "www.baidu.com" }, 
　　　　{ id: 5, name: "www.google.com" }, 
　　　　{ id: 4, name: "www.taobao.com" } 
　　　　] 
　　}; 
},

事件：

　　// 禁止某一项拖动
     onMove(e, originalEvent){
        console.log(e.draggedContext.element,"draggedContext")
        if (e.draggedContext.element == undefined) return false;
     },         
　　//拖拽完成事件 
 　　add1(e) { console.log(e); },
　　//开始拖拽事件 
　　 start(e) { console.log(e); }