sortable.js的应用

诸葛噢噢

已于 2023-03-27 23:00:39 修改

阅读量146

点赞数 1

文章标签： javascript html 前端

于 2023-03-27 22:31:16 首次发布

本文链接：https://blog.csdn.net/zhukehan24/article/details/129805835

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <div>{{groupList}}</div>
        <div id="example1">
            <div class="list-group-edit" @click="handleEdit">{{isEdit ? '完成':'编辑'}}</div>
            <div class="list-group-item" v-for="(item,index) in groupList" :key="item.key" :data-id="item.key">
                <div>{{item.msg}}</div>
                <span class="delLog" v-show="isEdit" @click="delList(index)">x</span>
            </div>
        </div>
    </div>
    
</body>
</html>

<style>
    #app {
        width: 500px;
        margin: 100px auto;
    }
    #example1 {
        border: 1px gray solid;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        position: relative;
    }
    .list-group-edit {
        cursor: pointer;
        position: absolute;
        top: 9;
        right: 0;
    }
    .list-group-item {
        margin: 5px;
        cursor: pointer;
        text-align: center;
        line-height: 100px;
        width: 100px;
        height: 100px;
        background-color: rgba(134, 134, 190, .5);
        position: relative;
    }
    .blue-background-class {
        background-color: rgba(83, 83, 136, 0.5);
    }
    .delLog {
        width: 5px;
        height: 5px;
        position: absolute;
        right: 5px;
        top: -45px;
    }
</style>

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script src="./Sortable.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '拖拽案列',
            groupList: [{icon: "", msg: "图标1"},{icon: "", msg: "图标2"},{icon: "", msg: "图标3"},{icon: "", msg: "图标4"},{icon: "", msg: "图标5"}],
            sortable: null,
            isEdit: false
        },
        created() {
            this.groupList.forEach((item, index) => {
                item.key = index + 1
            });
        },
        methods: {
            delList(index) {
                this.groupList.splice(index, 1)
            },
            handleEdit() {
                this.sortable.options.disabled = this.isEdit
                this.isEdit = !this.isEdit
            }
        },
        mounted() {
            this.sortable = new Sortable(example1, {
                disabled: true,
                animation: 100,
                ghostClass: 'blue-background-class',
                draggable: ".list-group-item",
                onEnd: (evt) => {
                    let newTable = this.sortable.toArray()
                    app.groupList.sort((a,b) =>  newTable.indexOf('' + a.key) - newTable.indexOf('' + b.key))
                }
            });
        }
    })
    
</script>