当前位置： 首页 > news >正文

vue3中使用拖拽组件vuedragable@next

news 来源：原创 2025/8/15 5:46:56

vue3中使用拖拽组件vuedragable@next

官网传送门

  • 下载

    npm install vuedraggable@next

  • 基本使用

    <script setup>
import draggable from 'vuedraggable'
import { ref } from 'vue'
const list = ref([{ id:1,name:'第一个' },{ id:2,name:'第二个' },{ id:3,name:'第三个' },
])
</script><template><div class="dragbox"><draggable v-model="list" item-key="id"><template #item="{element}" ><div>{{element.name}}</div></template></draggable></div>
</template>

  • 从一个盒子拖入到另一个盒子

    <script setup>
import draggable from 'vuedraggable'
import { ref } from 'vue'const sourceList = ref([{ id:1,name:'第一个' },{ id:2,name:'第二个' },{ id:3,name:'第三个' },
]) // 源const targetList = ref([])  // 目标
</script><template><div class="dragbox"><draggable v-model="sourceList" item-key="id":group="{ name: 'items', pull: 'clone', put: false }" :sort="false"><template #item="{element}"  ><div>{{ element.name }}</div></template></draggable></div><br /><div class="dragbox"><draggable v-model="targetList" item-key="id":group="{ name: 'items', pull: false, put: true }" ><template #item="{element}" ><div>{{ element.name }}</div></template></draggable></div>
</template>

  • 说明：

  • group属性的配置，name：相同的name间可以互相拖动，pull：true 允许往外拖拽，put：true 允许放入

  • sort属性 false则表示在当前盒子内部禁止拖拽

相关文章：

vue3中使用拖拽组件vuedragable@next

vue3中使用拖拽组件vuedragablenext 官网传送门 下载 npm install vuedraggablenext基本使用 <script setup> import draggable from vuedraggable import { ref } from vue const list ref([{ id:1,name:第一个 },{ id:2,name:第二个 },{ id:3,name:第三个 }, ]) <…...

编程日记 2025/8/15 5:46:56

Oracle、MySQL、PostgreSQL三大数据库对比分析

Oracle、MySQL、PostgreSQL 三大数据库的对比分析&#xff0c;结合 Java SpringBoot 项目开发 的实际场景&#xff0c;重点说明分库分表、主从复制的实现难度及案例。 一、数据库核心对比 1. 核心区别与适用场景 维度OracleMySQLPostgreSQL定位企业级商业数据库轻量级开源数据…...

编程日记 2025/8/15 12:29:43

java八股之并发编程

1.java线程和操作系统线程之间的区别&#xff1f; 现在java线程本质上是操作系统线程&#xff0c;java中采用的是一对一的线程模型&#xff08;一个用户线程对应一个内核进程&#xff09; 2.什么是进程和线程&#xff1f; 1.进程是操作系统一次执行&#xff0c;资源分配和调度的…...

编程日记 2025/8/15 12:30:04

Qt 入门 5 之其他窗口部件

Qt 入门 5 之其他窗口部件 本文介绍的窗口部件直接或间接继承自 QWidget 类详细介绍其他部件的功能与使用方法 1. QFrame 类 QFrame类是带有边框的部件的基类。它的子类包括最常用的标签部件QLabel另外还有 QLCDNumber、QSplitter,QStackedWidget,QToolBox 和 QAbstractScrol…...

编程日记 2025/8/15 12:30:05

Linux系统之----冯诺依曼结构

1.简要描述 冯诺依曼体系结构是现代计算机的基本设计思想&#xff0c;其核心理念是将计算机的硬件和软件统一为一个整体&#xff0c;通过存储程序的方式实现计算。冯诺依曼体系结构的核心思想是通过存储程序实现自动计算&#xff0c;其五大部件协同工作&#xff0c;奠定了现代…...

编程日记 2025/8/15 12:26:56

C++11新特性

目录 引入 C11新特性 统一的初始化列表 一切皆可{}初始化 std::initializer_list 统一的声明 auto decltype nullptr 范围for STL新增容器 STL新增容器接口 左值引用和右值引用 左值和右值 左值引用和右值引用 右值引用的优势(移动语义) 右值引用的使用场景 …...

编程日记 2025/8/11 13:31:17

492Q 型气缸盖双端面铣削组合铣床总体设计

一、引言 492Q 型气缸盖是发动机的重要组成部分&#xff0c;其双端面的加工精度对发动机的性能和可靠性有着重要影响。设计一款适用于 492Q 型气缸盖双端面铣削的组合铣床&#xff0c;能够提高加工效率和质量&#xff0c;满足发动机生产的需求。 二、总体设计要求 加工精度&…...

编程日记 2025/8/15 12:28:29

《软件设计师》复习笔记（4.2）——关系代数、函数依赖、范式

目录 一、关系代数 基本运算 笛卡尔积&#xff08;&#xff09; 投影&#xff08;π&#xff09; 选择&#xff08;σ&#xff09; 自然连接&#xff08;⋈&#xff09; 真题示例&#xff1a; 二、函数依赖 基本概念 Armstrong公理系统 键与约束 三、范式&#xff…...

编程日记 2025/8/15 12:28:26

IO流（二）

一、字符流 使用字节流可以读取文件中的字节数据。但是如果文件中有中文使用字节流来读取&#xff0c;就有可能读到半个汉字的情况&#xff0c;这样会导致乱码。虽然使用读取全部字节的方法不会出现乱码&#xff0c;但是如果文件过大又不太合适。 所以Java专门为我们提供了另…...

编程日记 2025/8/15 12:26:58

#Linux动态大小裁剪以及包大小变大排查思路

1 动态库裁剪 库分为动态库和静态库&#xff0c;动态库是在程序运行时才加载&#xff0c;静态库是在编译时就加载到程序中。动态库的大小通常比静态库小&#xff0c;因为动态库只包含了程序需要的函数和数据&#xff0c;而静态库则包含了所有的函数和数据。静态库可以理解为引入…...

编程日记 2025/8/15 12:30:08

天梯赛数据结构合集

1.集合操作&#xff1a;PTA | 程序设计类实验辅助教学平台 主要是注意set的取交集操作&#xff0c;AC代码&#xff1a; #include<bits/stdc.h> using namespace std; int n,m,k; set<int> a[60]; int main(){cin>>n;for(int i1;i<n;i){cin>>m;for…...

编程日记 2025/8/14 22:54:56

pdfjs库使用记录1

import React, { useEffect, useState, useRef } from react; import * as pdfjsLib from pdfjs-dist; // 设置 worker 路径 pdfjsLib.GlobalWorkerOptions.workerSrc /pdf.worker.min.js; const PDFViewer ({ url }) > { const [pdf, setPdf] useState(null); const […...

编程日记 2025/8/15 12:27:46

LIMS引领综合质检中心数字化变革，赋能质量强国战略

在质量强国战略的深入推进下&#xff0c;我国综合质检机构迎来了前所未有的发展机遇&#xff0c;同时也面临着诸多严峻挑战。随着检测领域从传统的食品药品监督向环境监测、新材料检测等新兴领域不断拓展&#xff0c;跨领域协同管理的复杂度呈指数级增长。作为提升产品质量的关…...

编程日记 2025/8/15 12:32:35

MySQL+Redis实战教程：从Docker安装部署到自动化备份与数据恢复20250418

MySQLRedis实战教程&#xff1a;从Docker安装部署到自动化备份与数据恢复 一、前言 在企业应用中&#xff0c;对MySQL和Redis运维的要求越来越高&#xff1a; 不能仅是启动就算部署运行稳定、隔离、访问控制、备份恢复、安全可靠&#xff0c;才是 企业级的基本功能 本文将手…...

编程日记 2025/8/15 12:31:26

嵌入式音视频开发指南：从MPP框架到QT实战全解析

嵌入式音视频开发指南：从MPP框架到QT实战全解析 一、音视频技术全景概述 1.1 技术演进里程碑 2003-2010年：标清时代（H.264/AVC + RTMP）2011-2018年：高清时代（H.265/HEVC + WebRTC）2019-至今：智能时代（AV1 + AI编解码 + 低延迟传输）1.2 现代音视频技术栈 #mermaid-s…...

编程日记 2025/8/15 12:30:07

如何使用Python进行自动化的系统管理？

Python已经成为系统管理员最流行的编程语言之一&#xff0c;因为它简单、灵活&#xff0c;并且广泛支持各种系统管理任务。无论您是自动执行重复性任务&#xff0c;管理文件和目录&#xff0c;还是处理用户权限&#xff0c;Python都提供了一组强大的工具来简化您的工作流程。 …...

编程日记 2025/8/15 12:31:27

拆机装机，通电主板亮灯风扇不转无法开机解决办法

电源开机线 重启线 usb耳机模块 灯线 看来电源没问题 参考https://zhidao.baidu.com/question/83939532/answer/2321171868.html 买了个新主板过几天到看看会不会好...

编程日记 2025/8/14 16:07:06

IntelliSense 已完成初始化，但在尝试加载文档时出错

系列文章目录 文章目录 系列文章目录前言一、原因二、使用步骤 前言 IntelliSense 已完成初始化&#xff0c;但在尝试加载文档时出错 File path: E:\QtExercise\DigitalPlatform\DigitalPlatform\main\propertyWin.ui Frame GUID:96fe523d-6182-49f5-8992-3bea5f7e6ff6 Frame …...

编程日记 2025/8/15 12:29:45

SuperMap iClient3D for WebGL 如何加载WMTS服务

在 SuperMap iClient3D for WebGL 中加载WMTS服务时&#xff0c;参数配置很关键&#xff01;下面我们详细介绍如何正确填写参数&#xff0c;确保影像服务完美加载。 一、数据制作 对于上述视频中的地图制作&#xff0c;此处不做讲述&#xff0c;如有需要可访问&#xff1a;Onl…...

编程日记 2025/8/15 12:33:55

[密码学实战]基于Python的国密算法与通用密码学工具箱

引言 在当今数字化浪潮中&#xff0c;信息安全已成为个人隐私保护与商业机密守护的核心议题。作为一位在密码学领域深耕多年的技术实践者&#xff0c;我深谙密码学工具在构建数字安全防线中的关键作用。正是基于这份认知与责任&#xff0c;我倾力打造了一款全方位、高性能的密…...

编程日记 2025/8/15 12:32:08

[密码学实战]详解gmssl库与第三方工具兼容性问题及解决方案

[密码学实战]详解gmssl库与第三方工具兼容性问题及解决方案 引言 国密算法&#xff08;SM2/SM3/SM4&#xff09;在金融、政务等领域广泛应用&#xff0c;但开发者在集成gmssl库实现SM2签名时&#xff0c;常遇到与第三方工具&#xff08;如OpenSSL、国密网关&#xff09;验证不…...

编程日记 2025/8/14 14:08:34

LIB-ZC, 一个跨平台(Linux)平台通用C/C++扩展库, stream 流操作

LIB-ZC, 一个跨平台(Linux)平台通用C/C扩展库, stream 流操作 lib-zc 封装了流操作命名空间 zcc基础类 stream(基类), iostream(io流封装) class stream 介绍 连接相关 // 都是虚函数, 为 iostream 等做准备virtual inline bool connect(const char *destination) { return …...

编程日记 2025/8/14 4:59:27

从零开始解剖Spring Boot启动流程：一个Java小白的奇幻冒险之旅

大家好呀&#xff01;今天我们要一起探索一个神奇的话题——Spring Boot的启动流程。我知道很多小伙伴一听到"启动流程"四个字就开始头疼&#xff0c;别担心&#xff01;我会用最通俗易懂的方式&#xff0c;带你从main()方法开始&#xff0c;一步步揭开Spring Boot的…...

编程日记 2025/8/15 12:32:08

概率多假设跟踪（PMHT）：多目标跟踪中的概率软关联与高效跟踪算法解析

一、PMHT 的起源与核心定位 &#xff08;一&#xff09;背景 在多目标跟踪中&#xff0c;传统算法面临以下瓶颈&#xff1a; JPDA&#xff1a;单帧局部最优关联&#xff0c;无法处理跨帧长时间断联&#xff0c;且假设目标数固定&#xff08;如雷达跟踪中预设目标数范围&…...

编程日记 2025/8/15 12:31:28

4.信号和槽|存在意义|信号和槽的连接方式|信号和槽断开|lambda表达式|信号和槽优缺点(C++)

信号和槽存在意义 所谓的信号槽&#xff0c;终究要解决的问题&#xff0c;就是响应用户的操作 信号槽&#xff0c;其实在GUI开发的各种框架中&#xff0c;是一个比较有特色的存在 其他的GUI开发框架&#xff0c;搞的方式都要更简洁一些&#xff5e;~ 网页开发 (js dom api) 网…...

编程日记 2025/8/15 12:33:54

电脑 BIOS 操作指南（Computer BIOS Operation Guide）

电脑 BIOS 操作指南 电脑的BIOS界面&#xff08;应为“BIOS”&#xff09;是一个固件界面&#xff0c;允许用户配置电脑的硬件设置。 进入BIOS后&#xff0c;你可以进行多种设置&#xff0c;具体包括&#xff1a; 1.启动配置 启动顺序&#xff1a;设置从哪个设备启动&#x…...

编程日记 2025/8/15 12:32:09

Scrapeless Scraping Browser: A high-concurrency automation solution for AI

介绍&#xff1a;升级无缝抓取浏览器的并发能力 作为 Scrapeless 的开发者和创始团队&#xff0c;我们对人工智能自动化的未来充满真诚的热情。我们的使命是创建一个真正为 AI 设计的自动化浏览器。在过去的几年中&#xff0c;从 Browserless.io 到众多云服务供应商推出的“浏…...

编程日记 2025/8/15 12:29:46

Java项目—— 拼图小游戏（进阶版）

项目需求 在拼图小游戏基础版的基础上&#xff0c;完成下列要求&#xff1a; 一、实现更换拼图图片功能 1&#xff0c;给美女&#xff0c;动物&#xff0c;运动菜单按钮添加单击事件&#xff08;动作监听&#xff09; 2&#xff0c;当我们点击了美女之后&#xff0c;就会从13…...

编程日记 2025/8/15 12:27:46

解析：深度优先搜索、广度优先搜索和回溯搜索

一、深度优先搜索&#xff08;DFS&#xff09; 1. 原理 思想&#xff1a;从起始节点出发&#xff0c;顺着一条路径不断深入&#xff0c;直到到达目标或无路可走&#xff0c;然后回溯到最近的分支点&#xff0c;继续探索其他分支。 应用场景&#xff1a;路径查找、连通性检测、…...

编程日记 2025/8/14 16:08:44

探索大语言模型（LLM）：循环神经网络的深度解析与实战（RNN、LSTM 与 GRU）

一、循环神经网络&#xff08;RNN&#xff09; 1.1 基本原理 循环神经网络之所以得名&#xff0c;是因为它在处理序列数据时&#xff0c;隐藏层的节点之间存在循环连接。这意味着网络能够记住之前时间步的信息&#xff0c;并利用这些信息来处理当前的输入。 想象一下&#xf…...

编程日记 2025/8/15 12:30:05

从零开始开发 MCP Server

作者&#xff1a;张星宇 在大型语言模型&#xff08;LLM&#xff09;生态快速演进的今天&#xff0c;Model Context Protocol&#xff08;MCP&#xff09;作为连接 AI 能力与真实世界的标准化协议&#xff0c;正逐步成为智能体开发的事实标准。该协议通过定义 Resources&#…...

编程日记 2025/8/11 3:00:29

Oracle日志系统之重做日志和归档日志

Oracle日志系统之重做日志和归档日志 重做日志归档日志 本文讨论Oracle日志系统中对数据恢复非常重要的两个日志&#xff1a;重做日志和归档日志。 重做日志 重做日志&#xff0c;英文名Redo Log&#xff0c;顾名思义&#xff0c;是用来数据重做的&#xff0c;主要使用场景是事…...

编程日记 2025/8/10 5:39:49

嵌入式开发--STM32G4系列硬件CRC支持MODBUS和CRC32

需求 在项目中&#xff0c;需要用到MODBUS CRC16校验&#xff0c;也要用到CRC32的校验&#xff0c;出于效率的考虑&#xff0c;准备用硬件CRC。 CRC 16的参数模型有很多种&#xff0c;我这里用的是MODBUS&#xff0c;对于不同的参数模型&#xff0c;会有不同的参数设置和初值&a…...

编程日记 2025/8/7 23:53:29

基于尚硅谷FreeRTOS视频笔记——4—多任务处理

目录 多任务处理 任务调度 任务的调度策略 优先级不同 优先级相同 多任务处理 通俗来讲就是 能够在同一时间 同时 进行多个任务的处理&#xff0c;这就时多任务处理。 但是&#xff0c;单核处理器一次只能处理一个任务&#xff0c;就是说在while中&#xff0c;任务们只能…...

编程日记 2025/8/13 17:24:26

中小型及初创企业如何实现数字化转型？

在当今动态的商业环境中&#xff0c;财务团队开始肩负起推动企业数字化转型的重任&#xff0c;即从传统的财务规划系统稳步迈向基于商业智能平台和以创新技术为驱动的解决方案领域。这些举措有望提高运营和分析效率&#xff0c;同时依托数据驱动的决策机制&#xff0c;帮助企业…...

编程日记 2025/8/5 14:59:26

java输出、输入语句

先创建一个用于测试的java 编写程序 #java.util使java标准库的一个包&#xff0c;这里拉取Scanner类 import java.util.Scanner;public class VariableTest {public static void main(String[] args) {#创建一个 Scanner 对象Scanner scanner new Scanner(System.in);System.…...

编程日记 2025/8/14 12:59:14

Python基础知识语法归纳总结（数据类型-1）

Python基础知识&语法归纳总结&#xff08;数据类型&#xff09; 一、Python基本数据类型 尤其注意&#xff0c;Python中的变量不需要特定的去声明&#xff0c;每个变量在使用前都必须对其进行赋值&#xff0c;它没有类型&#xff0c;我们所说的“类型”是变量所指的内存中对…...

编程日记 2025/8/13 5:06:25

Spring数据访问全解析：ORM整合与JDBC高效实践

目录 一、Spring ORM集成深度剖析 &#x1f31f; ORM模块架构设计 核心集成特性&#xff1a; 整合MyBatis示例配置&#xff1a; 二、Spring JDBC高效实践指南 &#x1f31f; 传统JDBC vs Spring JDBC对比 &#x1f31f; JdbcTemplate核心操作示例 批量操作优化&#xf…...

编程日记 2025/8/14 1:27:06

哪种电脑更稳定？Mac？Windows？还是云电脑？ 实测解密

随着科技的发展进步&#xff0c;电脑已成为当下各类群体的必备产品之一&#xff0c;它的妙用有很多&#xff0c;无论是学生党、打工人还是已经退休的人群或都离不开它的存在。然而&#xff0c;电脑虽好却也差异很大、不同品牌、不同系统、不同配置、不同价位的统统都会有区别。…...

编程日记 2025/8/9 17:27:32

【AI模型学习】关于写论文——论文的审美

文章目录 一、“补丁法”&#xff08;Patching&#xff09;1.1 介绍1.2 方法论1.3 实例 二、判断工作的价值2.1 介绍2.2 详细思路2.3 科研性vs工程性 三、novelty以及误区3.1 介绍3.2 举例 看了李沐老师的读论文系列后&#xff0c;总结三个老师提到的有关课题研究和论文写作的三…...

编程日记 2025/8/7 1:58:43

【面经】杭州产链数字科技一面

1.介绍一下自己 面试官您好&#xff01;我叫***&#xff0c;目前是就读于****计算机科学与技术专业的一名学生。我平时在学校也自学了编程相关的知识&#xff0c;比如Java基础、Springboot、SpringCloud&#xff0c;关系型数据库Mysql&#xff0c;非关系型数据库Redis&#xff…...

编程日记 2025/8/10 14:09:24

微信小程序调用yolo目标检测模型

目录 后端 前端微信小程序 完整代码 后端 利用Flask&#xff0c;调用目标检测模型&#xff0c;后端代码如下。 # flask_yolo.py from flask import Flask, request, jsonify from ultralytics import YOLO from PIL import Imageapp Flask(__name__) model_path best.p…...

编程日记 2025/8/10 16:38:34

vmware17 虚拟机 ubuntu22.04 桥接模式，虚拟机无法接收组播消息

问题描述&#xff1a; 在一个项目中&#xff0c;宿主机win10中&#xff0c;使用的vmware17pro 虚拟机安装的ubuntu22.04&#xff0c;按照网上的教程使用Qt绑定组播消息&#xff0c;在另外一个Ubuntu工控机上发送用wiresahrk抓包的组播消息 sudo tcpreplay -i enp1s0 --loop0 y…...

编程日记 2025/8/12 16:00:33

Kaggle-Bag of Words Meets Bags of Popcorn-(二分类+NLP+Bert模型)

Bag of Words Meets Bags of Popcorn 题意&#xff1a; 有很多条电影评论记录&#xff0c;问你每一条记录是积极性的评论还是消极性的评论。 数据处理&#xff1a; 1.首先这是文件是zip形式&#xff0c;要先解压&#xff0c;注意sep ‘\t’。 2.加载预训练的 BERT 分词器 …...

编程日记 2025/8/12 20:40:00

数字信号处理技术架构与功能演进

数字信号处理&#xff08;DSP&#xff09;是通过数字运算实现信号分析、变换、滤波及调制解调的技术领域&#xff0c;其发展过程与技术应用如下&#xff1a; 一、定义与核心功能 技术定义&#xff1a;通过算法将模拟信号转换为数字形式进行处理&#xff0c;具有高精度、可编程…...

编程日记 2025/8/14 23:28:38

IaaS架构剖析、场景实践

一、什么是 IaaS 1.1 定义 Infrastructure as a Service&#xff08;IaaS&#xff0c;基础设施即服务&#xff09;是一种按需、弹性提供计算、存储、网络和安全等底层 IT 资源的云服务模式。用户通过 API、CLI 或 Web 控制台即可在几分钟内创建、扩容或释放资源&#xff0c;而…...

编程日记 2025/8/14 14:04:24

国产之光DeepSeek架构理解与应用分析02

本专栏 国产之光DeepSeek架构理解与应用分析-CSDN博客 国产之光DeepSeek架构理解与应用分析02-CSDN博客 前置的一些内容理解 GPU TPU NPU的区别&#xff1f; 设计目的 GPU&#xff1a;最初是为了加速图形渲染而设计的&#xff0c;用于处理图像和视频数据&#xff0c;以提供高…...

编程日记 2025/8/13 9:30:41

EDID结构

EDID DDC通讯中传输显示设备数据 VGA , DVI 的EDID由128字节组成&#xff0c;hdmi的EDID增加扩展块128字节。扩展快的内容主要是和音频属性相关的&#xff0c;DVI和vga没有音频&#xff0c;hdmi自带音频&#xff0c;扩展快数据规范按照cea-861x标准。 Edid为了让pc或其他的图像…...

编程日记 2025/8/3 5:58:50

4.黑马学习笔记-SpringMVC(P43-P47)

1.SpringMVC简介 SpringMVC技术&#xff08;更少的代码&#xff0c;简便&#xff09;与servlet技术功能相同&#xff0c;属于web层开发技术。 SpringMVC是一种基于java实现MVC模型的轻量级web框架。 轻量级指的是&#xff08;内存占用比较低&#xff0c;运行效率高&#xff09;…...

编程日记 2025/8/3 5:58:48

CSS 文件格式

A QFrame#andrFrm[status"android_en"] A&#xff1a;表示父类或顶层窗口的类型。如果 A 是一个自定义的类名&#xff0c;确保该类已经正确注册到 Qt 系统中。QFrame&#xff1a;表示具体的控件类型。#andrFrm&#xff1a;表示控件的对象名称&#xff08;通过 setOb…...

编程日记 2025/8/3 5:58:46