html5拖放+vue+localStorage，实现拖放排序并记录到本地
前言
因业务需求，需要在页面上列出多个视频，并能拖放排序，且记录排序。
现使用技术如下：
vue + html5的drag事件实现元素拖放排序 +l ocalStorage记录到本地浏览器上，刷新页面不会重置排序。
本示例为了更好的用户体验，排序后使用css3 的 translate 来变更元素位置，而不是2个元素直接交换内容！如果直接交换内容，则视频会重新加载，用户体验不好！
效果
实现效果如下：
在线演示地址：https://lujingtao.github.io/html5-drag-vue-localstorage/dist/index.html
技术要点
1、通过 draggable="true" 开启元素的排序功能，例如：<span draggable="true"><span>；
然后绑定dragstart、dragenter、dragover...等事件，具体可以自行百度，其中本例也详细列出事件触发情况，按f12查看输出内容即可：
2、程序开始时从localStorage里面取排序记录，如果有则赋值给当前列表项目，其中还要处理列表项目变更情况（因为真实情况下，列表项目是从数据库读取的）；
//如果localStorage里面已有排序记录则赋值 this.sorts
let sorts = []; //本地排序记录集合
if (!!window.localStorage) {
let listSort = window.localStorage["listSort"];
if (listSort != undefined) {
sorts = JSON.parse(listSort);
}
}
//如果有排序记录则设置排序，没有则顺序排序
if (sorts.length == 0) {
this.items.forEach((item, index) => {
item.sort = index;
});
} else {
this.items.forEach((item) => {
for (let i = 0; i < sorts.length; i++) {
if (item.id == sorts[i].id) {
item.sort = sorts[i].sort;
break;
}
else if( i==sorts.length-1 ){
item.sort=sorts.length;
}
}
});
this.updateSort();
}
3、当项目元素变更（删除项目）后，vue会更新项目（items）再更新项目元素（li），所以li的位置变更需要在vue的updated里面：
updated() {
//当项目集合变更后，触发li元素变更，再执行li的位置变更
this.updateItemsSort();
},
完整代码
gitHub地址： https://github.com/lujingtao/html5-drag-vue-localstorage
<template>
<div id="app">
<h1>html5拖放 + vue + localStorage，实现拖放排序并记录到本地</h1>
<ul class="list">
<li v-for="item in items" :key="item.id">
<span draggable="true" :sort="item.sort">{{ item.name }}
</span>
<i class="close" :itemId="item.id">×</i>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [], //项目集合
}
},
mounted() {
this.updateItemsSort();
//删除元素事件
document.querySelectorAll(".list .close").forEach(c => {
c.addEventListener("click", () => {
let id = c.getAttribute("itemId");
for (let i = 0; i < this.items.length; i++) {
if (this.items[i].id == id) {
this.items.splice(i, 1);
this.updateSort();
break;
}
}
})
})
//拖拽元素集合
let $dragList = document.querySelectorAll(".list span");
let dragFrom = -1;
let dragTo = -1;
$dragList.forEach(v => {
//拖动元素开始拖拽
v.addEventListener('dragstart', (ev) => {
console.log("item" + ev.target.getAttribute("sort") + "_dragstart");
ev.dataTransfer.effectAllowed = "move";
//获取拖动元素排序
dragFrom = parseInt(ev.target.getAttribute("sort"));
//添加拖动元素当前样色
ev.target.classList.add("dragFrom");
});
//当拖动元素进入可释放目标时
v.addEventListener('dragenter', (ev) => {
console.log("item" + ev.target.getAttribute("sort") + "_dragenter");
let _dragTo = ev.target.getAttribute("sort");
//添加目标元素当前样色
$dragList.forEach(item => {
item.classList.remove("dragTo");
});
if ( dragFrom != _dragTo){
ev.target.classList.add("dragTo");
}
ev.preventDefault();
});
//当拖动元素在可释放目标上时
v.addEventListener('dragover', (ev) => {
console.log("item" + ev.target.getAttribute("sort") + "_dragover");
ev.preventDefault();
});
//当拖动元素在可释放目标上被释放时
v.addEventListener('drop', (ev) => {
console.log("item" + ev.target.getAttribute("sort") + "_drop");
ev.preventDefault();
//获取目标元素id
dragTo = parseInt(ev.target.getAttribute("sort"));
if (dragFrom == dragTo) return;
console.log("%citem" + dragFrom + "交换item" + dragTo, "color:orange");
//交换排序
let temp = this.items[dragFrom].sort;
this.items[dragFrom].sort = this.items[dragTo].sort;
this.items[dragTo].sort = temp;
ev.target.classList.remove("dragTo");
this.updateItemsSort();
});
//拖动元素结束拖拽
v.addEventListener('dragend', (ev) => {
console.log("item" + ev.target.getAttribute("sort") + "_dragend");
ev.target.classList.remove("dragFrom");
ev.preventDefault();
});
//当拖动元素变得不再是拖动操作的选中目标时
v.addEventListener('dragexit', (ev) => {
console.log("item" + ev.target.getAttribute("sort") + "_dragexit");
ev.preventDefault();
});
//当拖动元素离开一个可释放目标时触发
v.addEventListener('dragleave', (ev) => {
console.log("item" + ev.target.getAttribute("sort") + "_dragleave");
ev.preventDefault();
});
})
},
updated() {
//当项目集合变更后，触发li元素变更，再执行li的位置变更
this.updateItemsSort();
},
methods: {
//通过translate改变排序位置
updateItemsSort() {
let $list = document.querySelectorAll(".list li");
let _items = [];
this.items.forEach((item, i) => {
let y = parseInt(item.sort / 3);
let x = item.sort % 3;
$list[i].setAttribute("style", "transform: translate( " + 100 * x + "%, " + 100 * y +
"%)");
_items.push({ id: item.id, sort: item.sort });
});
//存储排序
if (!!window.localStorage) {
window.localStorage["listSort"] = JSON.stringify(_items);
}
},
//更新排序
updateSort() {
//已有排序的先按现有排序排列
this.items.sort((a, b) => {
return a.sort - b.sort
});
//再重新设置排序编号，以防元素个数发生变更
this.items.forEach((item, index) => {
item.sort = index;
});
}
},
created() {
this.items = [
{ id: 0, name: "item0" },
{ id: 1, name: "item1" },
{ id: 2, name: "item2" },
{ id: 3, name: "item3" },
{ id: 4, name: "item4" },
{ id: 5, name: "item5" },
{ id: 6, name: "item6" },
{ id: 7, name: "item7" },
{ id: 8, name: "item8" },
];
//如果localStorage里面已有排序记录则赋值 this.sorts
let sorts = []; //本地排序记录集合
if (!!window.localStorage) {
let listSort = window.localStorage["listSort"];
if (listSort != undefined) {
sorts = JSON.parse(listSort);
}
}
//如果有排序记录则设置排序，没有则顺序排序
if (sorts.length == 0) {
this.items.forEach((item, index) => {
item.sort = index;
});
} else {
this.items.forEach((item) => {
for (let i = 0; i < sorts.length; i++) {
if (item.id == sorts[i].id) {
item.sort = sorts[i].sort;
break;
}
else if( i==sorts.length-1 ){
item.sort=sorts.length;
}
}
});
this.updateSort();
}
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
h1 {
height: 50px;
line-height: 50px;
font-size: 20px;
text-align: center;
}
html,
body,
#app {
height: 100%;
}
.list,
.list li {
list-style: none;
}
.list {
position: absolute;
left: 10px;
right: 10px;
top: 50px;
bottom: 10px;
overflow: hidden;
}
.list li {
position: absolute;
width: 33.33%;
height: 33.33%;
transition: all .4s;
}
.list span {
position: absolute;
left: 10px;
top: 10px;
right: 10px;
bottom: 10px;
line-height: 2;
display: block;
background: #000;
color: #fff;
font-size: 20px;
text-align: center;
cursor: move;
transition: all .4s;
}
.list .close {
position: absolute;
right: 15px;
top: 15px;
width: 20px;
height: 20px;
border-radius: 20px;
line-height: 17px;
text-align: center;
background: rgba(255, 255, 255, .5);
font-style: normal;
cursor: pointer;
}
.list .dragFrom {
background: green;
}
.list .dragTo {
background: green;
}
</style>
浙公网安备 33010602011771号