Vue之vuedraggable拖拽排序用法 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>vue.draggable例子</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <script src="http://www.itxst.com/package/vue/vue.min.js"></script>
    <script src="http://www.itxst.com/package/sortable/Sortable.min.js"></script>
    <script src="http://www.itxst.com/package/vuedraggable/vuedraggable.umd.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
    <style scoped>
        .item {
            padding: 6px;
            background-color: #fdfdfd;
            border: solid 1px #eee;
            margin-bottom: 10px;
            cursor: move;
            position: relative;
        }

        span {
            position: absolute;
            top: 0;
            left: 0;
        }

        .item:hover {
            background-color: #f1f1f1;
            cursor: move;
        }

        .chosen {
            border: solid 2px #3089dc !important;
        }

        .box {
            width: 100%;
            height: 500px;
            overflow: auto;
            background-color: #efafaf;
        }

        img {
            width: 100%;
        }

        .scrollbar-5::-webkit-scrollbar-track {
            background-color: rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            margin-right: -10px;
        }

        .scrollbar-5::-webkit-scrollbar {
            width: 5px;
            height: 5px;
        }

        .scrollbar-5::-webkit-scrollbar-thumb {
            background-color: #666;
            border-radius: 5px;
        }
        .box{
            display: flex;
        }
        .imgBox{
            width: 150px;
            height: 150px;
            overflow: hidden;
        }
    </style>
</head>

<body style="padding:10px;">
    <div id="app">
        <div class="box scrollbar-5">
            <draggable v-model="myArray" chosen-class="chosen" :scroll="true" force-fallback="true" animation="150"
                @start="onStart" @end="onEnd">
                <div class="item" v-for="element in myArray" :key="element.id">
                    <div class="boxs">
                        <div class="imgBox">
                            <img :src="element.name" alt="">
                        </div>
                        <p>
                            {{element.ids}}
                        </p>
                    </div>
                </div>
            </draggable>
        </div>
    </div>
    <script>
        // 全局注册组件
        Vue.component('vuedraggable', window.vuedraggable)
        var app = new Vue({
            el: '#app',
            components: {
                vuedraggable: window.vuedraggable, //当前页面注册组件
            },
            data() {
                return {
                    drag: false,
                    myArray: [{
                            people: 'cn',
                            id: 1,
                            name: 'http://test-fileservice.syrjia.cn/uploadFiles/topic/1598595047053.jpg',
                            ids: '哈哈哈'
                        },
                        {
                            people: 'cn',
                            id: 2,
                            name: 'http://test-fileservice.syrjia.cn/uploadFiles/topic/1598595047053.jpg',
                            ids: '嘻嘻嘻嘻'
                        },
                        {
                            people: 'cn',
                            id: 3,
                            name: 'http://test-fileservice.syrjia.cn/uploadFiles/topic/1598595047053.jpg',
                            ids: '啦啦啦'
                        },
                        {
                            people: 'us',
                            id: 4,
                            name: 'http://test-fileservice.syrjia.cn/uploadFiles/topic/1598595047053.jpg',
                            ids: '呵呵呵呵'
                        }
                    ],
                    lastArr: []
                };
            },
            mounted() {
                this.myArray = JSON.parse(sessionStorage.getItem("myArray"))
            },
            methods: {
                onStart() {
                    this.drag = true;
                },
                onEnd() {
                    this.drag = false;
                    //拖拽完成后的顺序
                    let arr = []
                    this.myArray.forEach((item) => {
                        arr.push(item.id)
                    })
                    console.log(arr)
                    //拖拽后利用localStorage记录顺序
                    localStorage.arr = arr;
                    var localSt = localStorage.arr;//已经存储起来的排序后的id
                    //如果有localst记录则，按照这个进行排序元素
                    if (localSt) {
                        console.log(localSt)
                        var resArr = localSt.split(',');
                        var resUl = $('.box>div:eq(0)');
                        //li 数组
                        // for (var i = 0; i < resArr.length; i++) {
                        //     resUl.append($("#" + resArr[i]));
                        // }
                        let arrSort = [];//定义一个变量，用来存储排序后id对应的数据
                        for (let index = 0; index < resArr.length; index++) {//循环已经存储到localStorage中的数组id
                            const element = resArr[index];
                            console.log(element)
                            this.myArray.map(item => {//循环已经获取到的数组数据，根据存储到localStorage中的Id匹配到对应的数据
                                if (item.id == resArr[index]) {
                                    arrSort.push(item)
                                }
                            });

                        }
                        this.myArray = arrSort
                        console.log(this.myArray, '哈哈')
　　　　　　　　　　　　　　//将排序后的存储到sessioStorage中
                        sessionStorage.setItem('myArray', JSON.stringify(this.myArray))

                    }
                },
            }

        });


        // console.log($(".box"))
    </script>
</body>

</html>

 

posted @ 2020-09-07 15:04  夏小夏吖  阅读(3522)  评论(0)  编辑  收藏  举报