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