快捷導(dǎo)航

vue2 拖動(dòng)排序 vuedraggable組件的實(shí)現(xiàn)

更新時(shí)間：2019年08月08日 10:44:29 作者：zxc19890923

這篇文章主要介紹了vue2 拖動(dòng)排序 vuedraggable組件的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一、安裝插件

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>

四、實(shí)現(xiàn)change、start、end、move方法，v-model綁定的數(shù)據(jù)就是排序后的數(shù)據(jù)，可以傳遞給后臺(tái)修改數(shù)據(jù)庫(kù)數(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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+elementUI實(shí)現(xiàn)右擊指定表格列的單元格顯示選擇框功能
這篇文章主要介紹了vue+elementUI實(shí)現(xiàn)右擊指定表格列的單元格顯示選擇框功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-03-03
Vue開(kāi)發(fā)中Jwt的使用詳解
Vue中使用JWT進(jìn)行身份認(rèn)證也是一種常見(jiàn)的方式,它能夠更好地保護(hù)用戶的信息,本文主要介紹了Vue開(kāi)發(fā)中Jwt的使用詳解,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-12-12
vue 數(shù)據(jù)遍歷篩選過(guò)濾排序的應(yīng)用操作
這篇文章主要介紹了vue 數(shù)據(jù)遍歷篩選過(guò)濾排序的應(yīng)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
vue微信分享的實(shí)現(xiàn)(在當(dāng)前頁(yè)面分享其他頁(yè)面)
這篇文章主要介紹了vue微信分享，在當(dāng)前頁(yè)面分享其他頁(yè)面，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-04-04
使用vscode快速建立vue模板過(guò)程詳解
這篇文章主要介紹了使用vscode快速建立vue模板過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-10-10
Vue中this.$nextTick()的具體使用
本文主要介紹了Vue中this.$nextTick()的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue使用vux-ui自定義表單驗(yàn)證遇到的問(wèn)題及解決方法
這篇文章主要介紹了Vue使用vux-ui自定義表單驗(yàn)證遇到的問(wèn)題及解決方法,需要的朋友可以參考下
2018-05-05
vue頁(yè)面批量引入組件的操作代碼
這篇文章主要介紹了vue頁(yè)面批量引入組件,本文結(jié)合示例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
Vue.js仿Select下拉框效果
這篇文章主要為大家詳細(xì)介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
詳解在vue中如何使用node.js
這篇文章主要給大家介紹了關(guān)于在vue中如何使用node.js的相關(guān)資料,vue和nodejs經(jīng)常讓新手們感到困惑,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-07-07