前言

vue-dragging 的 npm 包的名字是 awe-dnd，并不是 vue-dragging，

特點(diǎn) : 封裝了 v-dragging 全局指令，然后通過全局指令去數(shù)據(jù)綁定等。

相比及 vuedraggable 來說， awe-dnd 是沒有暴露雙向綁定的方式，因此提供了事件，在拖拽結(jié)束的時(shí)候用來更新列表或者是去觸發(fā)父組件監(jiān)聽的事件。

如何使用

第一步: 安裝

npm install awe-dnd --save

第二步: 引入

main.js 文件

// 引入組件

import VueDND from 'awe-dnd'

// 添加至全局

Vue.use(VueDND)

第三步: 使用

v-for="item in dataList" v-dragging="{ item: item, list: dataList, group: 'color' }"

:key="color.text">

{{item .text}}

export default {

data () {

return {

dataList: [{

text: "red"

}, {

text: "blue"

}, {

text: "Gold"

},{

text: "Blueviolet"

}, {

text: "Lightblue"

}, {

text: "Cornflowerblue"

}]

}

}

}

童鞋們發(fā)現(xiàn)一個(gè)特殊指令: v-dragging="{ item: item, list: dataList, group: 'color' }"

這種形式進(jìn)行指令綁定，其中 item 就是單個(gè)對(duì)象，而 list 則是數(shù)據(jù)列表，group 則是用來聲明一個(gè)組，來保證可以在一個(gè)頁(yè)面中進(jìn)行多個(gè)數(shù)據(jù)源的操作。

還有提供兩個(gè)方法:

export default {

mounted () {

this.$dragging.$on('dragged', ({ val }) => {

console.log(val .item)

console.log(val .list)

console.log(val .otherData)

})

this.$dragging.$on('dragend', (res) => {

console.error(res);

})

}

}

總結(jié)

以上是生活随笔為你收集整理的vue 原型设计 拖拽_Vue 也能实现拖拽了 (vue-dragging)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。