vue可用于拖動(dòng)排序組件示例
更新時(shí)間：2023年06月06日 14:21:05 作者：AshleyLv
這篇文章主要為大家介紹了vue可用于拖動(dòng)排序組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
介紹
vue-dragging 一款可任意拖動(dòng)排序的vue插件。支持桌面和移動(dòng)端，拖拽過(guò)渡動(dòng)畫美觀。支持vue1和vue2版本。非常實(shí)用。
安裝
通過(guò)NPM安裝
$ npm install awe-dnd --save
插件應(yīng)用
在main.js中，通過(guò)Vue.use導(dǎo)入插件
import VueDND from 'awe-dnd' Vue.use(VueDND)
在你的vue文件中這樣引用
<script>
export default {
data () {
return {
colors: [{
text: "Aquamarine"
}, {
text: "Hotpink"
}, {
text: "Gold"
}, {
text: "Crimson"
}, {
text: "Blueviolet"
}, {
text: "Lightblue"
}, {
text: "Cornflowerblue"
}, {
text: "Skyblue"
}, {
text: "Burlywood"
}]
}
}
}
</script>
<template>
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>
</template>vue2.0的使用方式
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color' }"
:key="color.text"
>{{color.text}}</div>
</div>vue1.0的使用方式
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', key: color.text }"
track-by="text"
>{{color.text}}</div>
</div>添加事件
<div class="color-list">
<div
class="color-item"
v-for="color in colors" v-dragging="{ item: color, list: colors, group: 'color', otherData: otherData }"
:key="color.text"
>{{color.text}}</div>
</div>export default {
mounted () {
this.$dragging.$on('dragged', ({ value }) => {
console.log(value.item)
console.log(value.list)
console.log(value.otherData)
})
this.$dragging.$on('dragend', () => {
})
}
}以上就是vue可用于拖動(dòng)排序組件示例的詳細(xì)內(nèi)容，更多關(guān)于vue拖動(dòng)排序組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇vue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了理順8個(gè)版本vue的區(qū)別(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼
這篇文章主要介紹了nginx+vue.js實(shí)現(xiàn)前后端分離的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
el-table實(shí)現(xiàn)嵌套表格的展示功能(完整代碼)
el-table中在嵌套一個(gè)el-table,這樣數(shù)據(jù)格式就沒問題了,主要就是樣式,將共同的列放到一列中,通過(guò)渲染自定義表頭render-header,將表頭按照合適的寬度渲染出來(lái),本文給大家分享el-table實(shí)現(xiàn)嵌套表格的展示功能,感興趣的朋友一起看看吧2024-02-02
MAC安裝vue環(huán)境保姆級(jí)教程(homebrew、nvm、nodejs、npm、vue、axios等)
Vue.js是一種用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,它在前端開發(fā)中得到了廣泛應(yīng)用,這篇文章主要介紹了MAC安裝vue環(huán)境(homebrew、nvm、nodejs、npm、vue、axios等)的相關(guān)資料,需要的朋友可以參考下2025-12-12
vue3+vite+tdesign實(shí)現(xiàn)日歷式可編輯的排課班表填寫功能
本文介紹了如何使用Vue3和tdesign實(shí)現(xiàn)一個(gè)日歷式、可編輯的排班填寫功能,開發(fā)過(guò)程中面臨了年份和月份下拉框的實(shí)現(xiàn)、周期顯示以及可編輯日歷的樣式和數(shù)據(jù)獲取等挑戰(zhàn),感興趣的朋友一起看看吧2025-01-01
自己最近做項(xiàng)目的時(shí)候遇到需要下載文件的需求,索性這里給總結(jié)下,這篇文章主要給大家介紹了關(guān)于Vue中下載不同文件五種常用的方式,需要的朋友可以參考下2023-09-09
這篇文章主要為大家介紹了如何利用Vue3制作簡(jiǎn)單的消消樂游戲，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起動(dòng)手試一試2022-05-05
解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問題
這篇文章主要介紹了解決element-ui的el-dialog組件中調(diào)用ref無(wú)效的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
Vue中@keyup.enter?@v-model.trim的用法小結(jié)
這篇文章主要介紹了Vue中@keyup.enter?@v-model.trim的用法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-12-12