vue2列表拖拽操作

安装插件

npm i -S vuedraggable

<template>
    <div>
        <!--使用draggable组件-->
        <div class="itxst">
            <div class="col">
                <div class="title">把下面元素拖拽到B组试试看</div>
                <draggable v-model="arr1" :group="groupA" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                    chosenClass="chosenClass" @start="onStart" @end="onEnd">
                    <transition-group :style="style">
                        <div class="item" v-for="item in arr1" :key="item.id">{{ item.name }}</div>
                    </transition-group>
                </draggable>
            </div>
            <div class="col">
                <div class="title">B组（本组是个空数组）</div>
                <draggable v-model="arr2" :group="groupB" animation="300" dragClass="dragClass" ghostClass="ghostClass"
                    chosenClass="chosenClass" @start="onStart" @end="onEnd">
                    <transition-group :style="style">
                        <div class="item" v-for="item in arr2" :key="item.id">{{ item.name }}</div>
                    </transition-group>
                </draggable>
            </div>
        </div>
    </div>
</template>
<script>
//导入draggable组件
import draggable from 'vuedraggable'
export default {
    //注册draggable组件
    components: {
        draggable,
    },
    name: "drag-dome",
    data() {
        return {
            drag: false,
            groupA: {
                name: 'site',
                pull: true, //可以拖从
                put: true//可以拖出
            },
            groupB: {
                name: 'site',
                pull: true,
                put: true
            },
            //定义要被拖拽对象的数组
            arr1: [
                { id: 1, name: 'www.itxst.com' },
                { id: 2, name: 'www.jd.com' },
                { id: 3, name: 'www.baidu.com' },
                { id: 3, name: 'www.taobao.com' }
            ],
            arr2: [], //空数组
            //空数组之在的样式，设置了这个样式才能拖入
            style: 'min-height:120px;display: block;'
        };
    },
    methods: {
        //开始拖拽事件
        onStart() {
            this.drag = true;
        },
        //拖拽结束事件
        onEnd() {
            this.drag = false;
        },
    },
};
</script>
<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass {
    background-color: blue !important;
}

.chosenClass {
    background-color: rgb(126, 163, 179) !important;
    opacity: 1 !important;
}

.dragClass {
    background-color: rgb(175, 169, 181) !important;
    opacity: 1 !important;
    box-shadow: none !important;
    outline: none !important;
    background-image: none !important;
}

.itxst {
    margin: 10px;

}

.title {
    padding: 6px 12px;
}

.col {
    width: 40%;
    flex: 1;
    padding: 10px;
    border: solid 1px #eee;
    border-radius: 5px;
    float: left;
}

.col+.col {
    margin-left: 10px;
}

.item {
    padding: 6px 12px;
    margin: 0px 10px 0px 10px;
    border: solid 1px #eee;
    background-color: #f1f1f1;
}

.item:hover {
    background-color: #fdfdfd;
    cursor: move;
}

.item+.item {
    border-top: none;
    margin-top: 6px;
}
</style>