vue3使用vuedraggable实现拖拽功能
本文实例为大家分享了vue3使用vuedraggable实现拖拽功能的具体代码,供大家参考,具体内容如下
1、npm i vuedraggable -S,使用这个命令,vue3会报错,如下图
文章图片
2、使用npm uninstall vuedraggable -S 卸载,再使用npm i -S vuedraggable@next下载最新版
3、vue使用代码如下:
拖拽{{ element }} .title {text-align: center; color: #42b983; }.wrapper {display: flex; justify-content: center; width: 100%; }.item {width: 100px; height: 100px; font-size: 50px; text-align: center; line-height: 100px; margin: 10px; background-color: #42b983; color: #ffffff; }
4、效果如下图
文章图片
【vue3使用vuedraggable实现拖拽功能】以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
推荐阅读
- 使用vuedraggable实现从左向右拖拽功能
- 详解Java中的mapstruct插件使用
- vue拖拽组件vuedraggable使用说明详解
- vuedraggable实现拖拽功能
- 46-nohup使用
- python基本使用-Python|python基本使用-Python 应该怎么去练习和使用()
- 前端设计|Vue Element 安装与使用
- 学习|使用IOS快捷指令打开任意支付宝小程序
- 使用opencv的仿射变换函数warpAffine实现对图像的任意角度旋转
- OpenCV|Opencv中使用Surf特征实现图像配准及对透视变换矩阵H的平移修正