1.最近有个需求是

  a)左边菜单栏的菜单项拖动到右边的容器中;

  b)左边的菜单栏的内容不变

  c)拖动的过程中默认的影子单元来模拟被拖动单元换成固定的图片

综上，上网找了很多有关的vue拖拽组件，其中发现vuedraggable组件比较符合需求。

2.官网地址：https://www.npmjs.com/package/vuedraggable 发现功能确实强大，然后就着手开始啦。

3.左容器和右容器能相通拖动需要进行分组-----组别为同一组别即可，我的配置下图所示（在此要感谢这个csdn

Clew123 的网友  https://blog.csdn.net/zjiang1994/article/details/79809687写了很多基础的内容配置，避免走了很多弯道）

4.左边的配置项比右边多了一个ghostClass目的是为了实现如下图中红色框标注的效果（此处还有个小bug就是后面那个默认的投影内容不知道怎么去除）

5.dragOptions中sort 参数和group参数中pull和put的设置目的是为了实现左边拖动的时候内容顺序不改变，如下图所示

⚠️⚠️⚠️ 从0到1的基础内容可以看官网（https://www.npmjs.com/package/vuedraggable）或者Clew123网友的站 （ https://blog.csdn.net/zjiang1994/article/details/79809687）

这么多朋友要代码 上图中的逻辑内容设计较多 所以我就直接写一个简单的demo效果如下

1.左边数据不变 右边数据不能拖动到左边  

代码如下:

<template>
    <div class="dragDemo">
        <!--列表1-->
        <draggable class="list-group"
                   element="div"
                   v-model="listLeft"
                   :options="dragOptions1"
                   :move="onMove"
                   @start="isDragging=true"
                   @end="isDragging=false">
            <div v-for="(item,key) in listLeft" :key="key">
                <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
                {{item.name}}-{{item.value}}
            </div>
        </draggable>
        <!--列表2-->
        <draggable class="list-group"
                   element="div"
                   v-model="listRight"
                   :options="dragOptions2"
                   :move="onMove"
                   @start="isDragging=true"
                   @end="isDragging=false"
        >
            <div v-for="(item,key) in listRight" :key="key">
                <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
                {{item.name}}-{{item.value}}
            </div>
        </draggable>
    </div>
</template>

<script>
    import draggable from "vuedraggable";

    export default{
        name:'dragDemo',
        components:{
            draggable
        },
        data(){
            return{
                isDragging:false,
                listLeft:[{
                    name:'数据一',
                    value:'1'
                },{
                    name:'数据二',
                    value:'2'
                },{
                    name:'数据三',
                    value:'3'
                },{
                    name:'数据四',
                    value:'4'
                },{
                    name:'数据五',
                    value:'5'
                }],
                listRight:[]
            }
        },
        computed: {
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull: 'clone',
                        put: false
                    },
                    ghostClass: "ghost",
                };
            },
            dragOptions2(){
                return {
                    animation: 0,
                    group: "description",
                };
            }
        },
        methods:{
            onMove({relatedContext, draggedContext}) {
                const relatedElement = relatedContext.element;
                const draggedElement = draggedContext.element;
                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                );
            },
        }
    }
</script>

<style scoped lang="scss" rel="stylesheet/scss">
   .dragDemo{
       margin-top:50px;
       display: flex;
       justify-content: center;
       color: #555;
       .list-group{
           width: 300px;
           border: 1px solid #ddd;
           text-align: center;
           margin-right: 50px;
           >div{
               padding:10px;
               border-bottom:1px dashed #ddd;
               img{
                   width:25px;
                   height:25px;
                   vertical-align: middle;
                   padding-right:10px;
               }
           }
       }
   }
</style>

2.左边数据不变 右边数据可拖动到左边

<template>
    <div class="dragDemo">
        <!--列表1-->
        <draggable class="list-group"
                   element="div"
                   v-model="listLeft"
                   :options="dragOptions1"
                   :move="onMove"
                   @start="isDragging=true"
                   @end="isDragging=false">
            <div v-for="(item,key) in listLeft" :key="key">
                <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
                {{item.name}}-{{item.value}}
            </div>
        </draggable>
        <!--列表2-->
        <draggable class="list-group"
                   element="div"
                   v-model="listRight"
                   :options="dragOptions2"
                   :move="onMove"
                   @start="rightStart"
                   @end="rightEnd"
        >
            <div v-for="(item,key) in listRight" :key="key">
                <img src="http://oss.shangmian.xin/ciBm3U1544694909000?imageslim">
                {{item.name}}-{{item.value}}
            </div>
        </draggable>
    </div>
</template>

<script>
    import draggable from "vuedraggable";

    export default{
        name:'dragDemo',
        components:{
            draggable
        },
        data(){
            return{
                isDragging:false,
                listLeft:[{
                    name:'数据一',
                    value:'1'
                },{
                    name:'数据二',
                    value:'2'
                },{
                    name:'数据三',
                    value:'3'
                },{
                    name:'数据四',
                    value:'4'
                },{
                    name:'数据五',
                    value:'5'
                }],
                listRight:[],
                oldleftlist:[]
            }
        },
        computed: {
            dragOptions1() {
                return {
                    animation: 0,
                    group: {
                        name: "description",
                        pull:'clone'
                    },
                    ghostClass: "ghost",
                };
            },
            dragOptions2(){
                return {
                    animation: 0,
                    group: "description",
                };
            }
        },
        methods:{
            onMove({relatedContext, draggedContext}) {
                const relatedElement = relatedContext.element;
                const draggedElement = draggedContext.element;
                return (
                    (!relatedElement || !relatedElement.fixed) && !draggedElement.fixed
                );

            },
            rightStart(){
                this.oldleftlist=this.listLeft.concat();
                this.isDragging=true;
            },
            rightEnd(){
                this.isDragging=false;
                //左边数据不变
                this.listLeft=this.oldleftlist.concat();
            }
        }
    }
</script>