可拖拽列表是参考这位大佬的基于Vue快速实现列表拖拽排序,在他的基础上添加了点击后的效果,实现一个类似菜单一样的列表,可以拖拽。思路和一般的菜单点击一样,只是从常见的匹配index变成匹配id。
ps:gif的掉帧好严重。。。。仅供参考。。。
代码如下。
<template>
<div class="listAll">
<transition-group name="drag" class="list" tag="ul">
<li
@dragenter="dragenter($event, index)"
@dragover="dragover($event, index)"
@dragstart="dragstart($event,index)"
draggable="true"
v-for="(item, index) in list"
:key="item.title"
:id="item.id"
class="list-item el-dropdown-menu__item"
@click="dataLink(item)"
:class="{isactive:dragId===item.id}"
>
<div>
{{ item.title }}
</div>
<div style="font-size: 8px">
{{item.link_sum}}
</div>
</li>
</transition-group>
</div>
</template>
<script>
export default {
name:'list',
props:{
list:[]
},
data() {
return {
dragIndex: "",
enterIndex: "",
dragId:"",
};
},
methods: {
//关于拖拽的函数
dragstart(e,index) {
this.dragIndex = index;
},
dragenter(e, index) {
e.preventDefault();
if (this.dragIndex !== index) {
const moving = this.list[this.dragIndex];
this.list.splice(this.dragIndex, 1);
this.list.splice(index, 0, moving);
this.dragIndex = index;
}
},
dragover(e, index) {
// this.selectId = this.dragId
e.preventDefault();
},
dataLink(val){
//点击样式
this.dragId = val.id
//点了就传给vuex,得到这组数据,数据里有id链接数等等
this.$store.state.group = val
}
}
};
</script>
<style scoped>
.listAll{
height: 100%;
}
.list {
margin: 0;
list-style: none;
padding-left: 0;
border: 0;
}
.drag-move {
transition: transform 0.3s;
}
.list-item {
cursor: pointer;
width:100%;
line-height: 50px;
text-align: center;
padding: 0 !important;
display: flex;
justify-content: space-around;
}
.isactive{
background-color: rgb(236, 245, 255);
}
</style>
在大佬的代码上修改了一些地方。绑定了<li>的id属性,用点击事件把id记录下来,然后在把匹配当前点击的li的id和存的id。