拖拽排序vue元件
阿新 • • 發佈:2019-02-07
因為專案一開始用的jquery,所以當時找的拖拽排序外掛是jquery-ui。然後最近想著是不是也可以用vue來做拖拽排序,前期找了幾個,但是好像是不支援v2.0的,然後在思否剛好看到一篇文章,也是講拖拽排序元件的,然後自己就跟著弄下來試了試。
安裝
npm install awe-dnd --save
main.js
import VueDND from 'awe-dnd'
Vue.use(VueDND)
sortable.vue
<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>
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
},
//這裡挺重要的,因為我們一般排序完要重新提交排序後的資料給後臺儲存,以便下一次安裝我們所需要的順序顯示,這裡的list就可以幫我們做到這一點,但是我們需要給資料新增一個uniqueId標誌。然後在排序完後或者列表對應的順序和uniqueId提交給後臺,我也不知道我說的咋樣。
mounted () {
this .$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.group)
})
}
}
</script>
<style>
.color-item{
border:1px solid #f1f1f1;
padding:10px 5px;
margin:5px 0;
border-radius: 4px;
}
</style>
排序完後的操作挺重要的,因為我們一般排序完要重新提交排序後的資料給後臺儲存,以便下一次安裝我們所需要的順序顯示,這裡的list就可以幫我們做到這一點,但是我們需要給資料新增一個uniqueId標誌。然後在排序完後或者列表對應的順序和uniqueId提交給後臺,我也不知道我說的你們能理解嗎,反正你們也可以打印出來看看。
效果