vue 原型设计 拖拽_Vue 也能实现拖拽了 (vue-dragging)

前言

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"

}, {