Vue.Draggable實現(xiàn)拖拽效果
更新時間：2020年07月29日 08:58:49 作者：Drox
這篇文章主要介紹了Vue.Draggable實現(xiàn)拖拽效果，使用簡單方便
，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
快速實現(xiàn)Vue.Draggable的拖拽效果，供大家參考，具體內容如下
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.在你的組件中引進依賴：
import draggable from 'vuedraggable'
3.注冊：draggable這個組件
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.有兩個常用的方法
一個是拖動中
一個是拖動結束
methods: {
getdata (evt) {
console.log(evt.draggedContext.element.id)
},
datadragEnd (evt) {
console.log('拖動前的索引 :' + evt.oldIndex)
console.log('拖動后的索引 :' + evt.newIndex)
console.log(this.tags)
}
}
現(xiàn)在你就可以自己嘗試使用了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue遠程加載sfc組件思路詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
Lottie 是一個適用于 Android、iOS、Web 和 Windows 的庫,它使用 Bodymovin 解析導出為 JSON 的 Adobe After Effects 動畫,下面我們就來看看它在vue中的是如何應用的吧2023-12-12
Vue+FormData+axios實現(xiàn)圖片上傳功能
這篇文章主要為大家學習介紹了Vue如何利用FormData和axios實現(xiàn)圖片上傳功能，本文為大家整理了詳細步驟，感興趣的小伙伴可以了解一下2023-08-08
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價值，感興趣的小伙伴們可以參考一2017-10-10
這篇文章主要為大家詳細介紹了Vue實現(xiàn)學生管理功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
本文由淺入深觀摩vue-router源碼是如何通過hash與History interface兩種方式實現(xiàn)前端路由，介紹了相關原理，并對比了兩種方式的優(yōu)缺點與注意事項。最后分析了如何實現(xiàn)可以直接從文件系統(tǒng)加載而不借助后端服務器的Vue單頁應用。2021-05-05
vue3+webpack中npm發(fā)布組件的實現(xiàn)
本文主要介紹了vue3+webpack中npm發(fā)布組件的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-01-01
vue 在methods中調用mounted的實現(xiàn)操作
這篇文章主要介紹了vue 在methods中調用mounted的實現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了vue中如何獲取本地IP地址，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue如何給頁面增加url前綴問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12