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

news2025/1/18 20:23:46

在这里插入图片描述

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

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

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

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vitepress里使用gitalk(图文教程)

vitepress里使用gitalk Gitalk 是一个基于 GitHub Issue 和 Preact 开发的评论插件 生成client配置 创建OAuth application 填写完毕,点击 Register application 即可 生成client secrets 一开始没有自动生成 Client secrets,需要手动生成&#xff…

亚信安慧AntDB数据库分布式架构剖析之snapshot receiver进程

本文主要介绍亚信安慧AntDB数据库的分布式架构下的特有进程之snapshot receiver的设计,这也是分布式架构的核心进程之一。 进程简介 该进程的作用从逻辑上解释包含两个方面: 同步快照,并且是作为通信的client端存在 同步事务号,…

css之常用样式

展示样式一&#xff1a; <div class"showListBox"><div class"List" v-for"(i,index) in sealList" :key"index"> <div class"ListItemCon"><div class"ListItem-titleBox"><img src…

Ollama管理本地开源大模型,用Open WebUI访问Ollama接口

现在开源大模型一个接一个的&#xff0c;而且各个都说自己的性能非常厉害&#xff0c;但是对于我们这些使用者&#xff0c;用起来就比较尴尬了。因为一个模型一个调用的方式&#xff0c;先得下载模型&#xff0c;下完模型&#xff0c;写加载代码&#xff0c;麻烦得很。 对于程…

工作中用到的 —— 工作总结提炼出来的股文

这里是目录 ---------------- VUE相关 -----------------1 - Vue3 是怎么得更快的&#xff1f;1-1 Fragment [frɡˈment]1-2 Suspense [səˈspens]1-3 Teleport [ˈtelipɔːt]1-4 v-memo 2- 说一下 Composition API3- 说一下 setup4- watch 和 watchEffect 的区别5- Vue3 响…

mysql索引 (索引的忧缺点 ,联合索引)

索引的忧缺点 优点 &#xff08;增加读操作效率&#xff0c;排序成本&#xff09; 1 查询效率高 2 降低排序成本&#xff0c;索引对应的字段 就已经 自动排序&#xff0c;因为索引本身就是一种排好序的数据结构 缺点&#xff08;降低写操作效率&#xff0c;占用空间&#xf…

知识蒸馏Matching logits与RocketQAv2

知识蒸馏Matching logits 公式推导 刚开始的怎么来&#xff0c;可以转看下面证明梯度等于输出值-标签y C是一个交叉熵&#xff0c;我们要求解的是这个交叉熵对的这个梯度。就是你可以理解成第个类别的得分。就是student model&#xff0c;被蒸馏的模型&#xff0c;它所输出的…

大根堆排序

堆是完全二叉树,分为大根堆和小根堆 完全二叉树 从左到右依次变满,高度O(logn) 非完全二叉树: 需要知道的几个点【堆可以看做一段连续的数组来存放】 i是索引位置 i位置的左孩子:2 * i + 1 i位置的右孩子:2 * i + 2 i位置的父亲节点:( i - 1 ) / 2 大根堆【每一颗…

es 分词器详解

基本概念 分词器官方称之为文本分析器&#xff0c;顾名思义&#xff0c;是对文本进行分析处理的一种手段&#xff0c;基本处理逻辑为按照预先制定的分词规则&#xff0c;把原始文档分割成若干更小粒度的词项&#xff0c;粒度大小取决于分词器规则。 分词器发生的时期 1、分词…

兼容性测试策略

&#x1f4cb; 个人简介 作者简介&#xff1a;大家好&#xff0c;我是凝小飞&#xff0c;软件测试领域作者支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd; 一.背景介绍 Android严重的碎片化&#xff0c;主要体现在品牌碎片化、设备碎片化、系统碎片化、分辨率碎…

HDFS的架构优势与基本操作

目录 写在前面一、 HDFS概述1.1 HDFS简介1.2 HDFS优缺点1.2.1 优点1.2.2 缺点 1.3 HDFS组成架构1.4 HDFS文件块大小 二、HDFS的Shell操作&#xff08;开发重点&#xff09;2.1 基本语法2.2 命令大全2.3 常用命令实操2.3.1 上传2.3.2 下载2.3.3 HDFS直接操作 三、HDFS的API操作3…

将Linux curl命令转换为windows平台的Python代码

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

怎么采集美团的数据

怎么使用简数采集器批量采集美团的活动、商家和商品相关信息呢&#xff1f; 简数采集器暂时不支持采集美团的相关数据&#xff0c;建议换其他网站采集&#xff0c;谢谢。 简数采集器采集网站文章数据特别高效方便&#xff0c;在简数智能向导模式下&#xff0c;只要填写要采集…

【Python】进阶学习:一文了解NotImplementedError的作用

【Python】进阶学习&#xff1a;一文了解NotImplementedError的作用 &#x1f308; 个人主页&#xff1a;高斯小哥 &#x1f525; 高质量专栏&#xff1a;Matplotlib之旅&#xff1a;零基础精通数据可视化、Python基础【高质量合集】、PyTorch零基础入门教程&#x1f448; 希望…

ios开发错误积累

1.xcode 下载模拟器报错 Could not download iOS 报错&#xff1a; 解决&#xff1a; 1、去官网下载自己需要 地址&#xff08;https://developer.apple.com/download/all&#xff09; 2、下载完成后&#xff0c;执行以下命令添加&#xff1a;xcrun simctl runtime add /路径…

桌面备忘录,电脑桌面备忘录怎么设置

在当今快节奏的生活中&#xff0c;备忘录成为了人们工作和生活中不可或缺的工具。然而&#xff0c;随着科技的发展&#xff0c;纸质备忘录逐渐被电子桌面备忘录所取代。在电脑桌面设置备忘录&#xff0c;可以更加高效地管理任务和提醒事项。 电脑桌面是我们日常工作和娱乐的主…

Dense Distinct Query for End-to-End Object Detection

摘要 对象检测中的一对一标签分配成功地消除了作为后处理的非极大值抑制&#xff08; NMS &#xff09;的需要&#xff0c;并使流水线端到端。然而&#xff0c;这引发了一个新的困境&#xff0c;因为广泛使用的稀疏查询无法保证高召回率&#xff0c;而密集查询不可避免地带来更…

论文篇00-【历年论文真题考点汇总】与【历年论文原题2009~2023年文字版记录】(2024年软考高级系统架构设计师冲刺知识点总结-论文篇-先导篇)

专栏系列文章推荐: 案例分析篇00-【历年案例分析真题考点汇总】与【专栏文章案例分析高频考点目录】 综合知识篇00-综合知识考点汇总目录 ...... 历年真题论文题考点汇总 历年软考系统架构设计师论文原题(2009-2022年) 因最新的2023年目前仅能搜索到回忆版,等楼主搜集到…

内容检索(2024.03.15)

随着创作数量的增加&#xff0c;博客文章所涉及的内容越来越庞杂&#xff0c;为了更为方便地阅读&#xff0c;后续更新发布的文章将陆续在此汇总并附上原文链接&#xff0c;感兴趣的小伙伴们可持续关注文章发布动态&#xff01; 本期更新内容&#xff1a; 1. 信号完整性理论与…

找机厅 洛谷 BFS

P10234 [yLCPC2024] B. 找机厅 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> #define pii pair<int,int> #define fr first #define sc second using namespace std; string maze[2000]; int vis[2000][2000]; char dirs[2005][2005]; st…