Vue 中简单使用拖拽

1.npm 或者 yarn 安装

 

 

2.在vue页面中使用 

 

 

 

3.html 

 

 

4完整代码 

<template>
    <div class="Carpiao_container">
        <div class="content">
            <!-- 绑定循环出来的数组  chosen-class是拖拽时自定义的样式  force-fallback为开启自定义样式   animation是拖拽速度  update是拖拽完成后的事件-->
            <draggable v-model="myArray" chosen-class="chosen" force-fallback="true" group="people" animation="1000" @update="ondate">
                <transition-group style="display:flex;width:30vw;flex-wrap:wrap;">
                    <div class="item" v-for="(element,index) in myArray" :key="index">{{element.name}}</div>
                </transition-group>
            </draggable>
        </div>
    </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
    name: "CarpiaoPage",
    components: {
        draggable,
    },
    mounted(){
    },
    data() {
        return {
            myArray: [
                { name: "方块1" },
                { name: "方块2" },
                { name: "方块3" },
                { name: "方块4" },
                { name: "方块4" },
                { name: "方块4" },
            ],
        };
    },
    methods: {
        handleNodeClick(data) {
            console.log(data);
            data.children ? (this.showa = false) : (this.showa = true);
        },
        ondate(val) {
            console.log(val);
            let newArray = this.myArray;
            this.myArray = newArray;
            console.log(this.myArray)
            localStorage.localArr=this.myArray
        },
    },
};
</script>

<style lang="less" scoped>
.Carpiao_container {
    height: 100%;
    width: 100%;
    display: flex;
}

.content {
    width: 100%;
    height: 100%;
}
.item {
    width: 10vw;
    height: 10vw;
    border: 1px solid #000;
    line-height: 10vw;
    text-align: center;
}
.chosen{
    color: red;
}
</style>