下载：
npm install sortablejs --save
引入：
import Sortable from ‘sortablejs’
<template>
<div class="flex" id="items">
<div class="item" v-for="(item,index) in value">
<p>{{item.name}}</p>
</div>
</div>
</template>
<style scope>
.item{
width: 100px;
height: 100px;
border: solid 1px #ccc;
font-size: 16px;
}
.flex{
display: flex;
justify-content: space-around;
}
</style>
<script>
import Sortable from 'sortablejs'
export default {
name: 'operationsAdd',
data () {
return {
value: [
{ name: 11111 },
{ name: 22222 },
{ name: 33333 },
{ name: 44444 }
]
}
},
methods: {
test() {
var that = this
var el = document.getElementById('items')
// 常用
new Sortable(el, {
onEnd: function (evt) {
// 获取排序之后的data数据
that.value.splice(evt.newIndex, 0, that.value.splice(evt.oldIndex, 1)[0])
var newArray = that.value.slice(0)
that.value = []
that.$nextTick(function () {
that.value = newArray
console.log(that.value)
})
}
})
}
},
mounted () {
this.test()
}
}
</script>
