vue2 拖動排序 vuedraggable組件的實現(xiàn)

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 21:52:47

vue2 拖動排序 vuedraggable組件的實現(xiàn)

vue2 拖動排序 vuedraggable組件的實現(xiàn):一、安裝插件 npm install -D vuedraggable 二、在需要排序的界面中引入組件 <script> import draggable from 'vuedraggable' export default { name: 'HelloWorld', components: { draggable },

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀vue2 拖動排序 vuedraggable組件的實現(xiàn):一、安裝插件 npm install -D vuedraggable 二、在需要排序的界面中引入組件 <script> import draggable from 'vuedraggable' export default { name: 'HelloWorld', components: { draggable },

一、安裝插件

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue2 拖動排序 vuedraggable組件的實現(xiàn)

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽： VUE 實現(xiàn) 排序的

熱門焦點

vue2 拖動排序 vuedraggable組件的實現(xiàn)

vue2 拖動排序 vuedraggable組件的實現(xiàn)

vue2 拖動排序 vuedraggable組件的實現(xiàn)

最新推薦

猜你喜歡

熱門推薦