Vue vuedraggable 拖拽

1. 下载 vuedraggable

npm install vuedraggable --save

2. vue使用

<template>
    <div class="drag">
        <draggable :move="getdata"
                   @update="datadragEnd"
                   class="dragUl"
                   v-model="list">
            <div :key="index" v-for="(item, index) in list">{{ item }}</div>
        </draggable>
    </div>
</template>

<script>
    import draggable from "vuedraggable";

    export default {
        name: "Drag",
        components: {
            draggable
        },
        data() {
            return {
                list: [1, 2, 3, 4, 5, 6, 7, 8]
            };
        },
        methods: {
            getdata(evt) {
                console.log(evt);
                //这里evt后续的内容根据具体的定义变量而定
            },
            datadragEnd(evt) {
                console.log("拖动前的索引 :" + evt.oldIndex);
                console.log("拖动后的索引 :" + evt.newIndex);
            }
        }
    };
</script>

<style lang="less" scoped>
    .dragUl {
        overflow: hidden;
    }

    .dragUl div {
        height: 30px;
        line-height: 30px;
        background: #ff8300;
        color: #fff;
        margin-bottom: 10px;
        text-align: center;
    }
</style>