vue拖拽排序 组件
npm install vuedraggable -S
vue.draggable中文文档
组件代码
<template>
<div>
<div class="CmodelType">
<div class="borderModel">
<div id="list-demo" class="demo" @dragover="dragover($event)">
<transition-group name="list" tag="p">
<div
v-for="(item, index) in dataList"
:key="item.id"
class="list-item"
draggable="true"
@dragstart="dragstart(item)"
@dragenter="dragenter(item, $event)"
@dragend="dragend(item, $event)"
@dragover="dragover($event)"
@click="activeVarClick(index)"
:class="{ activeCss: activeVar == index }"
>
{{ item.label }}
</div>
</transition-group>
</div>
</div>
<!-- 上下调整按钮 -->
<div>
<div>
<el-button
@click="add"
size="small"
icon="el-icon-caret-top"
></el-button>
</div>
<div>
<el-button
@click="remove"
size="small"
icon="el-icon-caret-bottom"
></el-button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
sortList: {
type: Array
}
},
data () {
return {
oldData: null,
newData: null,
dataList: [
{ id: 1, label: '测试一号' },
{ id: 2, label: '测试二号' },
{ id: 3, label: '测试三号' },
{ id: 4, label: '测试四号' }
],
activeVar: null
}
},
methods: {
add () {
if (this.activeVar != null && this.activeVar !== 0) {
const acttive = this.dataList.indexOf(this.dataList[this.activeVar])
const acttiveItem = this.dataList[acttive]
const newItems = [...this.dataList]
newItems.splice(acttive, 1)
newItems.splice(acttive - 1, 0, acttiveItem)
this.dataList = [...newItems]
this.activeVar = this.dataList.indexOf(acttiveItem)
}
},
remove () {
console.log(this.activeVar)
if (this.activeVar != null && this.activeVar <= this.dataList.length) {
const acttive = this.dataList.indexOf(this.dataList[this.activeVar])
const acttiveItem = this.dataList[acttive]
const newItems = [...this.dataList]
newItems.splice(acttive, 1)
newItems.splice(acttive + 1, 0, acttiveItem)
this.dataList = [...newItems]
this.activeVar = this.dataList.indexOf(acttiveItem)
}
},
activeVarClick (index) {
this.activeVar = index
},
ModelType () {
this.activeVar = null
this.dialogVisibleType = true
},
dragover (e) {
e.preventDefault()
},
dragend (value, e) {
console.log(value, e)
if (this.oldData !== this.newData) {
const oldIndex = this.dataList.indexOf(this.oldData)
const newIndex = this.dataList.indexOf(this.newData)
const newItems = [...this.dataList]
this.activeVar = newIndex
newItems.splice(oldIndex, 1)
newItems.splice(newIndex, 0, this.oldData)
this.dataList = [...newItems]
}
},
dragenter (value, e) {
this.newData = value
e.preventDefault()
},
dragstart (value) {
console.log(value)
this.oldData = value
}
}
}
</script>
<style scoped>
.CmodelType{
max-height: 700px;
display: flex;
}
.borderModel{
width: 450px;
border: 1px #d9d9d9 solid;
padding: 10px;
overflow-x: hidden;
overflow-y: auto;
max-height: 700px;
}
.list-item {
display: block;
padding: 10px 10px;
}
.list-item:hover{
background-color: #F5F5F5;
cursor:pointer;
}
.activeCss{
background-color: #E6F3FF;
}
</style>
组件使用
main.js 全局注册
import dragSort from '@/components/dragSort'
Vue.component('dragSort', dragSort)
页面使用
<template>
<div>
<drag-sort :list="list" @sortList="sortList"></drag-sort>
</div>
</template>
<script>
export default {
data(){
return{
list:[],
}
},
mounted(){
},
methods:{
sortList(val){
}
}
}
</script>