Vue实现拖拽穿梭框功能四种方式( 三 ) _生活百科

四、Awe-dnd指令封装vue-dragging 的 npm 包的名字是 awe-dnd ，并不是 vue-dragging ，这个库的特点是封装了 v-dragging 全局指令，然后通过全局指令去数据绑定等。
相比及 vuedraggable 来说，awe-dnd 是没有双向绑定（这里没有双向绑定并不是很严谨，准确的来说没有暴露双向绑定的方式），因此提供了事件，在拖拽结束的时候用来更新列表（不需要手动更新列表，其实内部是实现了双向绑定的）或者是去触发父组件监听的事件。
安装依赖：
npm install awe-dnd --saveyarn add awe-andmain.js
import VueDND from 'awe-dnd'Vue.use(VueDND)案例：
<template> <div> <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> </div></template><style scoped>/*被拖拽对象的样式*/.item { padding: 6px; background-color: #fdfdfd; border: solid 1px #eee; margin-bottom: 10px; cursor: move;}/*选中样式*/.chosen { border: solid 1px #3089dc !important;}</style><script>export default { data() { return { drag: false, colors: [ { text: "Aquamarine", }, { text: "Hotpink", }, { text: "Gold", }, { text: "Crimson", }, { text: "Blueviolet", }, { text: "Lightblue", }, { text: "Cornflowerblue", }, { text: "Skyblue", }, { text: "Burlywood", }, ], }; }, methods: {},};</script>若对您有帮助，请点击跳转到B站一键三连哦！感谢支持?。。?
【Vue实现拖拽穿梭框功能四种方式】

Vue实现拖拽穿梭框功能四种方式( 三 )

推荐阅读

猕猴桃不熟可以吃吗？

属虎一周运势9.05到9.13

打印机喷头堵住了打印机喷头堵住了怎么办视频

风的等级怎么说，1万风量对应的风级？

盐城盐都区社保卡有哪些功能？

高质量睡眠这些方法助你天天有好睡眠

我的世界钓鱼能钓出竹子来吗我的世界钓鱼能钓出竹子来吗视频

刘强东妻子张天泽，刘强东妻子王京花

油泼面的基本步骤油泼面做法步骤

戊土生于丑月

直链淀粉和支链淀粉的区别有哪些直链淀粉和支链淀粉的区别

英文游戏名，好听的英文网名

【养生常识】鱼头豆腐汤一般用什么鱼鱼头没有豆腐可以加什么

半滑舌鳎怎么做好吃半滑舌鳎鱼多少钱一斤

王者荣耀礼物可以拒收吗别人送的礼物退了还给他吗

闯红灯能用别人的驾驶证代扣分吗闯红灯能用别人的驾驶证代扣分吗？

关于公正徽章的基本详情介绍公正徽章

煮萝卜干的方法煮萝卜干的方法是什么

关于潜热蓄热简述潜热蓄热

读后感小报怎么写