VueDraggable 拖动排序

• 记录下

<template>
    <div class="uni-flex uni-column">
        <gj-back />
        <div style="margin-top: 50px;"></div>

        <!-- 全部 -->
        <!-- 
         draggable=".item" class="item"可以拖动
         slot="header" 头部插槽
         id 可以区分拖动的区域
         @event.native 直接设置@event=会找不到method 
         group name相同的可以互相拖拽
         group put 是否可以拖进
         group pull 拖出的形式 ='clone'复制 =true 移动拖拽本身 =false没有效果
         group sort 是否可以内部拖动排序
         animation: 动画效果 0没有动画效果
         -->
        <draggable id="top" element="div" :list="collections" :options="options" class="dragable" draggable=".item" :move="moveAll" @start.native="startAll" @end.native="endAll" @remove.native="removeAll">
            <div slot="header" class="header">全部</div>
            <div v-for="(item, index) in collections" :key="item.name" class="item">
                {{item.name}}
            </div>
        </draggable>
        <!-- 我的收藏 -->
        <draggable id="bottom" :list="myCollections" element="div" :options="optionsMine" class="dragable" draggable=".item" style="margin-top: 10px; min-height: 100px;"
         :move="moveBottom" @start.native="startMine" @end.native="endMine" @remove.native="removeMine">
            <div slot="header" class="header">我的收藏</div>
            <div v-for="(item, index) in myCollections" :key="item.name" class="item">
                {{item.name}}
            </div>
        </draggable>
    </div>
</template>

<script>
    import Draggable from 'vuedraggable'
    export default {
        components: {
            Draggable
        },

        computed: {
            /*
                
            */
            options() {
                return {
                    group: {
                        name: 'item',
                        put: false,
                        pull: (() => this.cloneAll())
                    }, //相同组名可以相互拖

                    animation: 150,
                    sort: false,

                };
            },
            optionsMine() {
                return {
                    group: {
                        name: 'item',
                        pull: (() => this.cloneMine())
                    }, //相同组名可以相互拖
                    animation: 150,
                };
            },
        },

        data() {
            return {
                collections: [{
                    name: '历史',
                }, {
                    name: '政治',
                }, {
                    name: '科幻',
                }, {
                    name: '玄幻',
                }, {
                    name: '魔幻',
                }, {
                    name: '都市',
                }, {
                    name: '穿越',
                }, {
                    name: '喜剧',
                }],
                myCollections: [],
                topDragIndex: null,
                bottomDragIndex: null
            }
        },

        methods: {

            cloneAll() {
                return 'clone'
            },
            
            cloneMine() {
                return false
            },
            
            startAll(e){
                console.log('startAll: ' + e.oldIndex)
            },
            
            startMine(e){
                console.log('startMine: ' + e.oldIndex)
            },
            
            endAll(e){
                
                console.log('endAll__oldIndex:' + e.oldIndex + '__newIndex: ' + e.newIndex)
            },
            
            endMine(e){
                console.log('endBottom__oldIndex:' + e.oldIndex + '__newIndex: ' + e.newIndex)
            },

            moveAll(e) {
                console.log('move__all__to: ' + e.to.id)
                console.log('move__all__from: ' + e.from.id)
                var flag = null
                var moveName = e.draggedContext.element.name
                // console.log('move__top: ' + e.draggedContext.element.name)
                this.myCollections.map(e => {
                    if (e.name == moveName) {
                        uni.showToast({
                            title: '已存在',
                            icon: 'none'
                        })
                        flag = false
                    }
                })
                return flag
            },

            moveBottom(e) {
                // debugger
                console.log('move__bottom__to: ' + e.to.id)
                console.log('move__bottom__from: ' + e.from.id)
                return null
            },
            
            addAll(e){
                
                console.log('addAll: ')
            },

            addMine(e) {
                // debugger
                console.log('addMine: ')
            },
            
            removeAll(e){
                console.log('removeAll__from: ' + e.from.id + '__to: ' + e.to.id)
            },
            
            removeMine(e){
                console.log('removeMine__from: ' + e.from.id + '__to: ' + e.to.id)
            },
            
            

            change(e) {
                // debugger
                console.log('change: ' + e)
            },
        }
    }
</script>

<style scoped>
    .header {
        width: 100vw;
        margin-left: 15px;
    }

    .dragable {
        display: flex;
        flex-direction: row;
        margin-right: 15px;
        flex-wrap: wrap;
    }

    .item {
        width: calc((100vw - 60px)/3);
        height: calc((100vw - 60px)/3);
        background-color: #007AFF;
        margin-left: 15px;
        margin-top: 15px;
        justify-content: center;
        align-items: center;
        display: flex;
    }

    .item2 {
        width: calc((100vw - 60px)/3);
        height: calc((100vw - 60px)/3);
        background-color: #007AFF;
        margin-left: 15px;
        margin-top: 15px;
        justify-content: center;
        align-items: center;
        display: flex;
    }
</style>