免费开源的 Vue 拖拽组件 VueDraggablePlus (兼容移动端)

在这里插入图片描述

VueDraggablePlus 支持 Vue2 / Vue3,是被尤雨溪推荐了的拖拽组件。我自己试用过了,还挺好用的,兼容移动端。

官网:https://alfred-skyblue.github.io/vue-draggable-plus/

官网文档里面很详细了,我就不再介绍安装和用法了。

注意 注意 注意: 确保在使用 v-for 渲染列表时,绑定的 key 值是唯一的,否则会导致渲染错误。避免使用 index 作为 key 值。
我就因为上面的问题,折腾了两个小时找原因。
我的解决方式是,直接生成UUID。点击查看生成UUID

另外可能会涉及到 VUE 循环设置 ref 并获取 的问题,可以参考:vue3 循环设置 ref 并获取

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/279858.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国内超好用且免费的 AI 写作工具有哪些?

目前,市面上这类AI工具实在是太多了,比如依托于清华大学开发的智谱清言,或亦是百度的文心一言,还是阿里云的通义千问,这些AI工具在功能是类似的,但是依托于大模型的不同,可能回答的结果迥然不同…

用Python的turtle库绘制皮卡丘

turtle库的简介 turtle(海龟)库是turtle绘图体系的python实现,turtle库是一种标准库,是python自带的。 turtle(海龟)是一种真实的存在,有一个海龟在窗口的正中心,在画布上游走,走过的轨迹形成了绘制的图形&#xff0…

YOLOv9改进策略:卷积魔改 | AKConv(可改变核卷积),即插即用的卷积,效果秒杀DSConv | 2023年11月最新发表

💡💡💡本文改进内容: YOLOv9如何魔改卷积进一步提升检测精度?AKConv 通过不规则卷积运算完成高效特征提取的过程,为卷积采样形状带来更多探索选择。 AKConv可以作为即插即用的卷积运算来替代卷积运算来提高…

图解缓存淘汰算法 LRU、LFU | 最近最少使用、最不经常使用算法 | go语言实现

写在前面 无论是什么系统,在研发的过程中不可避免的会使用到缓存,而缓存一般来说我们不会永久存储,但是缓存的内容是有限的,那么我们如何在有限的内存空间中,尽可能的保留有效的缓存信息呢? 那么我们就可以…

nginx介绍及搭建

架构模型 Nginx是由一个master管理进程、多个worker进程组成的多进程模型。master负责管理worker进程,worker进程负责处理网络事件,整个框架被设计为一种依赖事件驱动、异步、非阻塞的模式。 优势: 1、充分利用多核,增强并发处理…

浏览器如何进行静态资源缓存?—— 强缓存 协商缓存

在平时使用浏览器排查问题的过程中,我们有时会看到浏览器网络请求中出现304状态码,那么是什么情况下出现304呢?下面是关于这一现象的解释: 浏览器如何进行静态资源缓存?—— 强缓存 & 协商缓存 状态码 304浏览器如…

Godot 学习笔记(2):信号深入讲解

文章目录 前言相关链接环境信号简单项目搭建默认的信号先在label里面预制接收函数添加信号 自定义无参数信号为了做区分,我们在label新增一个函数 自定义带参数信号Button代码label代码连接信号 自定义复杂参数信号自定义GodotObject类ButtonLabel连接信号 父传子Ca…

什么是神经网络?

一、什么是神经网络? 神经网络又称人工神经网络,是一种基于人脑功能模型的计算架构,因此称之为“神经”。神经网络由一组称为“节点”的处理单元组成。这些节点相互传递数据,就像大脑中的神经元相互传递电脉冲一样。 神经网络在…

深度学习pytorch——高阶OP(where gather)(持续更新)

where 1、我们为什么需要where? 我们经常需要一个数据来自好几个的取值,而这些取值通常是不规律的,这就会导致使用传统的拆分和合并会非常的麻烦。我们也可以使用for循环嵌套来取值,也是可以的,但是使用for循环就意味…

【数据可视化】使用Python + Gephi,构建中医方剂关系网络图!

代码和示例数据下载 前言 在这篇文章中,我们将会可视化 《七版方剂学》 的药材的关系,我们将使用Python制作节点和边的数据,然后在Gephi中绘制出方剂的网络图。 Gephi是一个专门用于构建网络图的工具,只要你能提供节点和边的数…

攻防实战 | 记一次nacos到接管阿里云百万数据泄露

在某次攻防当中,通过打点发现了一台nacos,经过测试之后发现可以通过弱口令进入到后台,可以查看其中的配置信息 通过翻看配置文件,发现腾讯云的AK,SK泄露,以及数据库的账号密码。操作不就来了么,直接上云&am…

jmeter打开文件报异常无法打开

1、问题现象: 报错部分内容: java.desktop does not export sun.awt.shell to unnamed module 0x78047b92 [in thread "AWT-EventQueue-0"] 报错部分内容: kg.apc.jmeter.reporters.LoadosophiaUploaderGui java.lang.reflect.Invo…

多种智能搜索算法可视化还原 3D 魔方

2024/03/19:程序更新说明(文末程序下载链接已更新) 版本:v1.0 → v1.2 ① 修复:将 CLOSED 表内容从优先级队列中分离开来,原优先级队列作 OPEN 表,并用链表树隐式地代替 CLOSED 表,以…

macOS系统中通过brew安装MongoDB

Macos 修改目录权限: sudo chmod -R 777 你的文件夹 本文使用homebrew进行安装简单,因为从官网下载安装包并手动安装需要移动安装包到合适的目录下并配置环境变量等一大堆操作后才能使用数据库(若没有安装过brew请自行百度进行安装brew&am…

改进YOLOv8注意力系列六:结合SEAttention轻量通道注意力、ShuffleAttention重排特征注意力模块、SimAM无参数化注意力

改进YOLOv8注意力系列五:结合ParNetAttention注意力、高效的金字塔切分注意力模块PSA、跨领域基于多层感知器(MLP)S2Attention注意力 代码SEAttention轻量通道注意力ShuffleAttention重排特征注意力模块SimAM无参数化注意力加入方法各种yaml加入结构本文提供了改进 YOLOv8注…

SQL数据库和事务管理器在工业生产中的应用

本文介绍了关系数据库在工业生产中的应用以及如何使用事务管理器将生产参数下载到PLC,以简化OT/IT融合过程。 一 什么是配方(Recipe) 我们以一家汽车零件制造商的应用举例,该企业专业从事汽车轮毂生产制造。假设该轮毂的型号是“…

短视频矩阵系统技术交付

短视频矩阵系统技术交付,短视频矩阵剪辑矩阵分发系统现在在来开发这个市场单个项目来说,目前基本上已经沉淀3年了,那么我们来就技术短视频矩阵剪辑系统开发来聊聊 短视频矩阵系统经过315大会以后,很多违规的技术开发肯定有筛选到了…

Java开发从入门到精通(九):Java的面向对象OOP:成员变量、成员方法、类变量、类方法、代码块、单例设计模式

Java大数据开发和安全开发 (一)Java的变量和方法1.1 成员变量1.2 成员方法1.3 static关键字1.3.1 static修饰成员变量1.3.1 static修饰成员变量的应用场景1.3.1 static修饰成员方法1.3.1 static修饰成员方法的应用场景1.3.1 static的注意事项1.3.1 static的应用知识…

用Stable Diffusion生成同角色不同pose的人脸

随着技术的不断发展,我们现在可以使用稳定扩散技术(Stable Diffusion)来生成同一角色但不同姿势的人脸图片。本文将介绍这一方法的具体步骤,以及如何通过合理的提示语和模型选择来生成出更加真实和多样化的人脸图像。 博客首发地…

[C语言]一维数组二维数组的大小

对于一维数组我们知道取地址是取首元素的地址,二维数组呢,地址是取第一行的地址,sizeof(数组名)这里计算的就是整个数组的大小,&数组名 表示整个数组,取出的是整个数组的地址,显示的是数组的首元素 记…