前言

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

特點 : 封裝了 v-dragging 全局指令，然后通過全局指令去數據綁定等。

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

如何使用

第一步: 安裝

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"

}]

}

}

}

童鞋們發現一個特殊指令: v-dragging="{ item: item, list: dataList, group: 'color' }"

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

還有提供兩個方法:

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);

})

}

}

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。