Vue.draggable学习

draggable: 基于并提供Sortable.js的所有特性

demo案例： 可以拖拽和删除

<template>
    <div class="row">
        <div class="col-3" style="display: flex;width: 80%" >
            <draggable
                    class="dragArea list-group"
                    :list="list1"
                    :group="{ name: 'people', pull: 'clone', put: false }"
                    @change="log"
            >
                <div class="list-group-item" v-for="element in list1" :key="element.id">
                    {{ element.name }}
                </div>
            </draggable>
            <draggable
                    class="dragArea list-group"
                    :list="list2"
                    :group="{ name: 'people', pull: 'clone', put: false }"
                    @change="log"
            >
                <div class="list-group-item" v-for="element in list2" :key="element.id">
                    {{ element.name }}
                </div>
            </draggable>
        </div>

        <div class="p_down">
            <h3>Draggable 3</h3>
            <template v-for="(item,index) in tableList">
                <div class="col-3" id="`##${index}`">
                    <draggable
                            class="dragArea list-group"
                            :id="index"
                            :list="item"
                            group="people"
                            @change="log"
                            @end="handleDragEnd"
                            :move = "handleRemoved"
                    >
                        <div class="list-group-item" v-for="element in item" :key="element.id">
                            {{ element.name }}
                        </div>
                    </draggable>
                </div>
            </template>
        </div>
        <el-button @click="handleClick">保存</el-button>

    </div>
</template>

<script>
    import draggable from "vuedraggable";
    // let idGlobal = 8;
    export default {
        name: "custom-clone",
        display: "Custom Clone",
        order: 3,
        components: {
            draggable
        },
        data() {
            return {
                list1: [
                    { name: "dog 1", id: 1 },
                    { name: "dog 2", id: 2 },
                    { name: "dog 3", id: 3 },
                    { name: "dog 4", id: 4 }
                ],
                list2: [
                    { name: "cat 5", id: 5 },
                    { name: "cat 6", id: 6 },
                    { name: "cat 7", id: 7 }
                ],
                list3: [
                    { name: "cat 5", id: 8 }
                ],
                commonList: [
                  {
                      list1: [[],[]]
                  },
                    {
                        list2: [
                            [
                                { name: "cat 5", id: 5 },
                                { name: "cat 6", id: 6 },
                            ],
                            [
                                { name: "cat 5", id: 8 }
                            ]
                        ]
                    }
                ],
                tableList: []
            };
        },
        mounted() {
            this.tableList = this.commonList[0].list1
        },
        methods: {
            log: function(evt) {
                window.console.log('cc',evt);

            },
            // cloneDog({ id }) {
            //     return {
            //         id: id,
            //         name: `cat ${id}`
            //     };
            // },
            cloneDog(evt) {
                var origEl = evt.item;
                var cloneEl = evt.clone;
                console.log("origEl",origEl)
                console.log("cloneEl",cloneEl)
                return origEl
            },
            handleDragEnd: function (evt,item) {
                console.log("evt-------")
                console.log(evt)
                console.log(evt.to.id)
                console.log(evt.from)
                console.log(evt.newIndex)
                console.log(evt.clone)
                console.log(evt.pullMode)
                // //
                // this.tableList.forEach(child => {
                //     for(let i = 0;i < child.length;i++) {
                //         if(i == evt.newDraggableIndex) {
                //             child.splice(evt.newDraggableIndex, 1)
                //         }
                //     }
                // })
                let currentId = evt.to.id
                let arr = this.tableList
                for(let i = 0;i < arr.length; i++) {
                    if(i == currentId) {
                        for(let j = 0;j < arr[i].length;j++) {
                            if(j == evt.newDraggableIndex) {
                                arr[i].splice(evt.newDraggableIndex, 1)
                            }
                        }
                    }
                }
            },
            handleRemoved(evt) {
                console.log(evt.draggedContext.index)
                console.log(evt.draggedContext.element)
                console.log(evt.draggedContext.futureIndex)
                console.log(evt.relatedContext.index)
                console.log(evt.relatedContext.element)
                console.log(evt.relatedContext.list)
                console.log(evt.relatedContext.component)
                return (evt.draggedContext.element.name!== 'b')
            },

            handleClick () {
                console.log(this.tableList);
            }
            // handleAdd: function (evt) {
            //     this.tableList.forEach(child => {
            //         for(let i = 0;i < child.length;i++) {
            //             if(i == evt.oldDraggableIndex) {
            //                 this.$message({
            //                     type: 'warning',
            //                     message: '不能重复添加'
            //                 })
            //                 return
            //             }
            //         }
            //     })
            // },

        }
    };
</script>
<style scoped lang="scss">
    .row {
        width: 100%;
        height: 800px;
        background: #FFFFFF;
        padding: 20px;

    }
    .col-3 {
        font-size: 18px;
        width: 50%;
        .dragArea {
            width: 100%;
            height: 300px;
            padding: 10px;
            display: flex;
        }
        .list-group-item {
            width: 10%;
            margin-top: 2%;
            margin: 2% 10px;
            display: inline-block;
        }
    }
    .p_down {
        width: 100%;
        height: 200px;
        display: flex;

        .col-3 {
            font-size: 18px;
            width: 50%;
            margin-left: 2%;
            border-left: 1px solid #cccccc;
            .dragArea {
                width: 100%;
                height: 300px;
                padding: 10px;
                display: flex;
            }
            .list-group-item {
                width: 10%;
                margin-top: 2%;
                margin: 2% 10px;
                display: inline-block;
            }
        }
    }
</style>

 

案例浏览：

https://sortablejs.github.io/Vue.Draggable/

https://david-desmaisons.github.io/draggable-example/

 

github上地址： https://github.com/SortableJS/Vue.Draggable