vue项目中实现对数组的拖拽排序功能

Vue项目中实现对数组的拖拽排序功能

下载插件

npm install vuedraggable -S

下载以后，在vue文件的script标签里面引入

    import draggable from 'vuedraggable'

注册组件，并把一些options中的参数写进数组

    export default {
        name: 'draglist',
        data() {
            return {
                dragOptions:{
                    animation: 120,
                    scroll: true,
                    group: 'sortlist',
                    ghostClass: 'ghost-style'
                },
                doing: [
                    {
                        id: 1,
                        content: '开发登录注册页面'
                    },
                    {
                        id: 2,
                        content: '开发头部组件'
                    },
                    {
                        id: 3,
                        content: '开发表格相关组件'
                    },
                    {
                        id: 4,
                        content: '开发表单相关组件'
                    }
                ],

template标签部分代码
注:draggable标签中的v-model写的是要执行拖拽的数组对象

                <div class="drag-box-item">
                    <div class="item-title">doing</div>
                    <draggable v-model="doing" @remove="removeHandle" :options="dragOptions">
                        <transition-group tag="div" id="doing" class="item-ul">
                            <div v-for="item in doing" class="drag-list" :key="item.id">
                                {{item.content}}
                            </div>
                        </transition-group>
                    </draggable>
                </div>

接下来就是对拖拽组件进行操作的相关方法

        methods: {
            removeHandle(event){
                console.log(event);
                this.$message.success(`从 ${event.from.id} 移动到 ${event.to.id} `);
            },
            dayin:function(){
             let _self=this;
             console.log(_self.doing);
             
            }
        }

来源：CSDN

作者：乐 之

链接：https://blog.csdn.net/User13528511814/article/details/103786711