vue+iview 表格 拖拽排序,代码如下
<Table
border
ref="selection"
:columns="columns"
:data="data"
:draggable ="true"
@on-drag-drop="onDragDrop"
>
</Table>
js 代码如下
onDragDrop(first, end) {
//转成int型,方便后续使用
first = parseInt(first);
end = parseInt(end);
let tmp = this.data[first];
if (first < end) {
for (var i = first + 1; i <= end; i++) {
this.data.splice(i - 1, 1, this.data[i]);
}
this.data.splice(end, 1, tmp);
}
if (first > end) {
for (var i = first; i > end; i--) {
this.data.splice(i, 1, this.data[i - 1]);
}
this.data.splice(end, 1, tmp);
}
},
vue+其他列表拖拽排序 awe-dnd
npm install awe-dnd --save
//main.js
import VueDND from 'awe-dnd'
Vue.use(VueDND)
js代码:
<!--your.vue-->
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
},
mounted() {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
})
}
}
</script>
<template>
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
</template>