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实现拖拽穿梭框功能四种方式( 三 )

推荐阅读

狗牙花怎么养狗牙花怎么养才能开花?

cs怎么开启添加好友（cs:go怎么加好友)

风暴舞一共多少集风暴舞总集数

武汉积分落户怎么办理(材料+流程）

毕业了想考英语六级怎么办毕业了想考英语四级怎么办

桂林的水三大特点桂林山水的特点

能够嫁豪门的女人手掌特征看这3个地方就可以了

2020年07月19日双鱼座事业爱情运势

两兔一起合财吗属兔和属兔合适吗

关于杭州川一实验仪器有限公司简述杭州川一实验仪器有限公司

看似不相配，实则很般配，甚至天生一对的星座配对

江湖悠悠将财物交给王忠和私吞怎么选,[图文攻略]

什么叫骏枣骏枣的图片?

把图片处理成线稿 ps图片变线稿的几种方法

八字中子午对冲

羊肉怎样去除腥味羊肉怎样去除腥味百度经验

武汉生育津贴、护理假津贴发放标准2023大全

双子座的性格该死吗?

函怎么写邀请函怎么写

北京八宝咸菜的腌制方法北京八宝咸菜