Vue 中使用拖拽排序插件 Awe-dnd

Posted 2021-12-09 aiguangyuan

1. 安装插件

npm install awe-dnd --save

2. 引入插件

import VueDND from 'awe-dnd'

Vue.use(VueDND)

3. 使用插件

<template>
    <div class="title-list">
        <div
            v-dragging="{item: item, list:list}"
            v-for="item in list"
            :key="item.id"
            class="title-item">
            <div class="title-child">
                <span>{{item.id +"－－"+ item.name }}</span>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    name: "titleList",
    data() {
        return {
            list: [
                {id:1,name:"这是第一个标题名称"},
                {id:2,name:"这是第二个标题名称"},
                {id:3,name:"这是第三个标题名称"},
                {id:4,name:"这是第四个标题名称"},
                {id:5,name:"这是第五个标题名称"},
            ],
        };
    },
    mounted() {
        // 拖拽事件
        this.$dragging.$on("dragged", (result) => {
            // 将排序后的结果重新赋值
            this.list = result.value.list;
        });
    },
};
</script>

<style lang="scss" scoped>
    .title-list {
        width: 350px;
        background:#fff;
        margin:100px auto 0;
        border: 1px solid red;
        .title-item {
            width: 350px;
            cursor: pointer;
            border: 1px solid #ededed;
            .title-child {
                width: 330px;
                height: 60px;
                margin: 0 auto;
                position: relative;
                span {
                    width: 100%;
                    font-size: 14px;
                    color: red;  
                    line-height: 30px;
                    // 只显示两行，多余的以省略号显示
                    white-space: normal;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    // 无论一行还是两行均居中显示
                    position: absolute;
                    left: 0;
                    top: 50%;
                    transform: translate(0, -50%);
                }
            }
        }
    }

</style>