学习 vuedraggable 拖拽插件

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 注册完，直接可作为组件使用，包裹要拖拽的组件就行。

1. animation="450" 拖拽这个过程完成的时间。
2. group="people 作为组，相同的组之间可进行拖拽。
3. :move="checkMove" 处理函数最重要的是 draggedContext，可以链接拖拽元素的上下文，记住拖拽元素。
4. @change="changed" 拖拽完成触发。如果绑定此事件的组件多了数据，将会有 e.added ，绑定此事件的组件少了数据，就会有 e.removed。在组件上移动完成会有 e.moved 每个API 对应的参数：
   

• json-viewer 的使用

1. theme 属性当类名使用。可通过 CSS 自定义代码的显示样式。
2. :expand-depth=2 代码的展开深度为二级。零级（0）不显示。
3. copyable 出现一键复制标志
4. boxed 变成一个圆盒子
5. sort 代码过多进行折叠。
6. :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