Vue.Draggable實(shí)現(xiàn)拖拽效果

更新時(shí)間：2020年07月29日 08:58:49 作者：Drox

這篇文章主要介紹了Vue.Draggable實(shí)現(xiàn)拖拽效果，使用簡(jiǎn)單方便，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

快速實(shí)現(xiàn)Vue.Draggable的拖拽效果，供大家參考，具體內(nèi)容如下

1.下載包：npm install vuedraggable

配置：package.json

"dependencies": {
 "element-ui": "^1.3.4",
 "less": "^2.7.2",
 "less-loader": "^4.0.4",
 "vue": "^2.3.3",
 "vue-router": "^2.3.1",
 "vuedraggable": "^2.11.0"
 },

2.在你的組件中引進(jìn)依賴：

import draggable from 'vuedraggable'

3.注冊(cè)：draggable這個(gè)組件

components: {
　　draggable
},

4.使用html模板中使用該組件

<draggable v-model="tags" :move="getdata" @update="datadragEnd">
  <transition-group>
   <div v-for="element in tags" :key="element.id">
    {{element.name}}
   </div>
  </transition-group>
</draggable>

5.有兩個(gè)常用的方法

一個(gè)是拖動(dòng)中

一個(gè)是拖動(dòng)結(jié)束

 methods: {
  getdata (evt) {
  console.log(evt.draggedContext.element.id)
  },
  datadragEnd (evt) {
  console.log('拖動(dòng)前的索引 :' + evt.oldIndex)
  console.log('拖動(dòng)后的索引 :' + evt.newIndex)
  console.log(this.tags)
  }
 }

現(xiàn)在你就可以自己嘗試使用了。

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

您可能感興趣的文章:

相關(guān)文章

vue遠(yuǎn)程加載sfc組件思路詳解
這篇文章主要介紹了vue遠(yuǎn)程加載sfc組件思路詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
詳解lottie動(dòng)畫在vue中的應(yīng)用
Lottie 是一個(gè)適用于 Android、iOS、Web 和 Windows 的庫(kù),它使用 Bodymovin 解析導(dǎo)出為 JSON 的 Adobe After Effects 動(dòng)畫,下面我們就來看看它在vue中的是如何應(yīng)用的吧
2023-12-12
Vue+FormData+axios實(shí)現(xiàn)圖片上傳功能
這篇文章主要為大家學(xué)習(xí)介紹了Vue如何利用FormData和axios實(shí)現(xiàn)圖片上傳功能，本文為大家整理了詳細(xì)步驟，感興趣的小伙伴可以了解一下
2023-08-08
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一
2017-10-10
Vue實(shí)現(xiàn)學(xué)生管理功能
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)學(xué)生管理功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-06-06
從vue-router看前端路由的兩種實(shí)現(xiàn)
本文由淺入深觀摩vue-router源碼是如何通過hash與History interface兩種方式實(shí)現(xiàn)前端路由，介紹了相關(guān)原理，并對(duì)比了兩種方式的優(yōu)缺點(diǎn)與注意事項(xiàng)。最后分析了如何實(shí)現(xiàn)可以直接從文件系統(tǒng)加載而不借助后端服務(wù)器的Vue單頁(yè)應(yīng)用。
2021-05-05
vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn)
本文主要介紹了vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2025-01-01
vue 在methods中調(diào)用mounted的實(shí)現(xiàn)操作
這篇文章主要介紹了vue 在methods中調(diào)用mounted的實(shí)現(xiàn)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue中如何獲取本地IP地址
這篇文章主要介紹了vue中如何獲取本地IP地址，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue如何給頁(yè)面增加url前綴
這篇文章主要介紹了vue如何給頁(yè)面增加url前綴問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12