本次案例一共使用了两个插件。

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 对应的参数：

        <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>
            </draggable>
        <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>
            </draggable>
        <div class="data"><json-viewer theme="my-awesome-json-theme" :expand-depth=0  copyable boxed sort :value="item"></json-viewer></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%);