<!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>