vue2 拖動排序 vuedraggable組件的實現(xiàn)
更新時間：2019年08月08日 10:44:29 作者：zxc19890923
這篇文章主要介紹了vue2 拖動排序 vuedraggable組件的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
一、安裝插件
npm install -D vuedraggable
二、在需要排序的界面中引入組件
<script>
import draggable from 'vuedraggable'
export default {
name: 'HelloWorld',
components: {
draggable
},
三、在模板中使用
<draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">
<div v-for="(item, index) in groups" :key=index>
item {{item}}
</div>
</draggable>
四、實現(xiàn)change、start、end、move方法，v-model綁定的數(shù)據(jù)就是排序后的數(shù)據(jù)，可以傳遞給后臺修改數(shù)據(jù)庫數(shù)據(jù)
methods: {
change (event) {
console.log('change', event)
},
start (event) {
console.log('start', event)
},
end (event) {
console.log('end', event, this.groups)
},
move (event, orgin) {
console.log('move', event, orgin)
}
}
五、完整代碼，參考網(wǎng)址
<template>
<div>
排序
<draggable v-model="groups" @chang="change" @start="start" @end="end" :move="move">
<!-- <transition-group> -->
<div v-for="(item, index) in groups" :key=index>
item {{item}}
</div>
<!-- </transition-group> -->
</draggable>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
name: 'HelloWorld',
components: {
draggable
},
data () {
return {
groups: [
1, 2, 3, 4, 5
]
}
},
methods: {
change (event) {
console.log('change', event)
},
start (event) {
console.log('start', event)
},
end (event) {
console.log('end', event, this.groups)
},
move (event, orgin) {
console.log('move', event, orgin)
}
}
}
</script>
<style scoped>
</style>
https://github.com/SortableJS/Vue.Draggable
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue+elementUI實現(xiàn)右擊指定表格列的單元格顯示選擇框功能
這篇文章主要介紹了vue+elementUI實現(xiàn)右擊指定表格列的單元格顯示選擇框功能,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
Vue中使用JWT進行身份認證也是一種常見的方式,它能夠更好地保護用戶的信息,本文主要介紹了Vue開發(fā)中Jwt的使用詳解,具有一定的參考價值,感興趣的可以了解一下2023-12-12
vue 數(shù)據(jù)遍歷篩選 過濾 排序的應用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選 過濾 排序的應用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue微信分享，在當前頁面分享其他頁面，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04
這篇文章主要介紹了使用vscode快速建立vue模板過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要介紹了Vue使用vux-ui自定義表單驗證遇到的問題及解決方法,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了vue頁面批量引入組件,本文結合示例代碼給大家講解的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要給大家介紹了關于在vue中如何使用node.js的相關資料,vue和nodejs經(jīng)常讓新手們感到困惑,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-07-07