<template>
<div class="hello">
<ul>
<transition-group class="transition-wrapper" name="sort">
<li v-for="(item,index) in addList" :key="item.id"
:draggable="true"
@dragstart="dragstart(item)"
@dragenter="dragenter(item,$event)"
@dragend="dragend(item,$event)"
@dragover="dragover($event)">
{{item.name}}
<el-button @click="goUporDown(1,index)">上移</el-button>
<el-button type="danger" @click="goUporDown(2,index)">下移</el-button>
</li>
</transition-group>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
addList: [
{
id: 1,
name: '1'
},
{
id: 2,
name: '2'
},
{
id: 3,
name: '3'
},
{
id: 4,
name: '4'
}
]
}
},
methods: {
// 当移动移入某个元素时触发
dragover (e) {
// 禁止默认事件触发
e.preventDefault()
},
// 鼠标拖动当前元素时触发
dragstart (v) {
this.oldValue = v
},
// 鼠标松开进入某个容器时触发
dragenter (v, e) {
this.newValue = v
},
// 鼠标完成拖动后触发
dragend (v, e) {
// eslint-disable-next-line no-useless-return
if (this.newValue === this.oldValue) return
// 拿到旧节点index
let oldIndex = this.addList.indexOf(this.oldValue)
// 拿到新节点index
let newIndex = this.addList.indexOf(this.newValue)
this.addList.splice(oldIndex, 1) // 先删
this.addList.splice(newIndex, 0, this.oldValue)// 再增
},
goUporDown (type, index) {
if (type === 1 && index > 0) {
let lsitDel = this.addList.splice(index, 1) // 先删除
this.addList.splice(index - 1, 0, lsitDel[0]) // 再增
} else if (type === 2 && index < this.addList.length - 1) {
let listAdd = this.addList.splice(index, 1)
this.addList.splice(index + 1, 0, listAdd[0])
}
}
}
}
</script>
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
/* align-items: center; */
justify-content: center;
flex-direction:column;
}
li {
margin-bottom: 10px;
width:200px;
height:50px;
background: #42b983;
}
a {
color: #42b983;
}
.sort-move{
transition: transform 0.3s;
}
</style>
前端列表上下移动+拖拽移动
最新推荐文章于 2024-08-02 11:25:35 发布
关键词由CSDN通过智能技术生成