vue 的插件一般比较乱，所以官方吧，自己搞了个插件库。网址部署在 GitHub 上：
https://github.com/vuejs/awesome-vue 我们需要拖拽插件就自己搜 drag ，然后我选了个 vuedraggable 。
做出来的预览效果大约如下所示：
vuedraggable
主要功能有：
- 拖拽排序
- 局部拖拽
- 分组拖拽
- 代码格式化
一、认识使用插件
本次案例一共使用了两个插件。
npm install --save vuedraggable //拖拽插件
npm install --save vue-json-viewer //数据格式化
- draggable 使用
draggable 引入，在 Vue 的components 注册完，直接可作为组件使用，包裹要拖拽的组件就行。
-
animation="450"拖拽这个过程完成的时间。 -
group="people作为组，相同的组之间可进行拖拽。 -
:move="checkMove"处理函数最重要的是 draggedContext，可以链接拖拽元素的上下文，记住拖拽元素。 -
@change="changed"拖拽完成触发。如果绑定此事件的组件多了数据，将会有 e.added ，绑定此事件的组件少了数据，就会有 e.removed。在组件上移动完成会有 e.moved 每个API 对应的参数：
- json-viewer 的使用
-
theme属性当类名使用。可通过 CSS 自定义代码的显示样式。 -
:expand-depth=2代码的展开深度为二级。零级（0）不显示。 -
copyable出现一键复制标志 -
boxed变成一个圆盒子 -
sort代码过多进行折叠。 -
:value="item"进入显示区的数据。
使用的去看源代码吧！
源代码如下：
<template>
<div class="box">
<h1>vuedraggable学习</h1>
<div class="left">
<draggable animation="450" :move="checkMove" @change="changed" group="people" v-model="item" handle=".handle">
<div class="move" v-for="i in item" :key="i.title">
<div class="order handle"><img src="/images/move.svg">序号：{{i.order}}</div>
<div class="title">{{i.title}}</div>
<div class="moving">移动状态：{{i.moving}}</div>
</div>
</draggable>
</div>
<div class="right">
<draggable animation="450" :move="checkMove" @change="changed" group="people" v-model="arr">
<div class="move" v-for="i in arr" :key="i.title">
<div class="order">序号：{{i.order}}</div>
<div class="title">{{i.title}}</div>
<div class="moving">移动状态：{{i.moving}}</div>
</div>
</draggable>
</div>
<div class="data"><json-viewer theme="my-awesome-json-theme" :expand-depth=0 copyable boxed sort :value="item"></json-viewer></div>
</div>
</template>
<script>
//引包
import draggable from "vuedraggable";
import JsonViewer from 'vue-json-viewer';
export default {
// 注册
components:{
draggable,
JsonViewer
},
data(){
return {
//拖拽数据
item : [
{"title":"使用draggable标签可直接拖拽","order":9,"moving":false},
{"title":"dragable标签可直接使用v-model","order":10,"moving":false},
{"title":":move是拖拽过程中的事件","order":11,"moving":false},
{"title":"handle自定义拖拽区域","order":12,"moving":false}
],
arr : [
{"title":"支持触摸设备","order":0,"moving":false},
{"title":"支持拖拽和选择文本","order":1,"moving":false},
{"title":"支持智能滚动","order":2,"moving":false},
{"title":"支持不同列表之间的拖拽","order":3,"moving":false},
{"title":"不以jQuery为基础","order":4,"moving":false},
{"title":"视图模型同步刷新","order":5,"moving":false},
{"title":"支持撤销操作","order":6,"moving":false},
{"title":"完全控制时，抛出所有变化","order":7,"moving":false},
{"title":"可以和现有的UI组件兼容","order":8,"moving":false}
]
}
},
methods:{
// 下面两个事件是用来实现拖拽"moving":false变为true
// 序号交换处理
checkMove(e){
e.draggedContext.element.moving = true;
let c = 0;
c = e.relatedContext.element.order;
e.relatedContext.element.order = e.draggedContext.element.order;
e.draggedContext.element.order = c;
},
// 交换完成，松开鼠标时触发
changed(e){
if(e.moved!==undefined){
e.moved.element.moving = false;
}else if(e.added!==undefined){
e.added.element.moving = false;
}
}
}
}
</script>
<style scoped>
.my-awesome-json-theme {
color:#890;
background-color: #fff;
}
.box{
width: 1200px;
height: 600px;
margin:10px auto;
background-color:#e9ecef;
position: relative;
}
.right{
position: absolute;
left:20px;
}
.left{
position: absolute;
right:20px;
}
.move{
width: 400px;
height: 30px;
cursor:move;
line-height: 30px;
font-size:12px;
padding: 10px 20px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid rgba(0,0,0,.125);
}
.order{
float:left;
}
.order img{
width: 20px;
vertical-align: middle;
margin-right:5px;
}
.title{
float:left;
margin-left:50px;
}
.moving{
float:right;
}
.data{
position: absolute;
font-size: 12px;
width: 250px;
left:50%;
transform: translate(-50%);
}
</style>
最近简书要审查简书上的违规内容，周期为一个月整，在这期间不能发布文章，那没办法了，这期间写完的就留个时间吧。
2019.08.31 22:48
