vue draggable

一、安装: 

 npm i -S vuedraggable@next

二、代码

<draggable :list="projectOptions" item-key="name" class="w-25" ghost-class="ghost"
	chosen-class="chosen" @update="updateSort" animation="300">
	<template #item="{ element }">
		<div class="mt-2 w-100%"
			style="line-height: 25px;border: 1px solid darkgreen;margin-bottom: 10px;padding: 5px">
			<n-tag class="item" :class="{ 'not-draggable':false }" :key="element.id">
				{{ element.name }}
			</n-tag>
			<el-checkbox style="float: right;" v-model="element.checked" size="large" />
		</div>
	</template>
</draggable>

三、效果

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

跨境独立站推广策略:有哪些方法与工具?

在出海独立站商家中&#xff0c;推广是必不可少的环节。在你完成网站的搭建&#xff0c;产品的上架&#xff0c;以及网站的运营和优化后&#xff0c;你就可以开始着手推广你的网站了。你的网站是承载你的品牌和产品的主要平台&#xff0c;因此&#xff0c;你需要根据你的品牌和…

Java实现RS485串口通信

博客链接地址 近期&#xff0c;我接到了一个任务&#xff0c;将报警器接入到Java项目中&#xff0c;而接入的方式就是通过RS485接入&#xff0c;本人之前可以说是对此毫无所知。不过要感谢现在的互联网&#xff0c;通过网络我查到了我想要知道的一切&#xff0c;这里记录下本次…

【新闻】金融专业“免进”!私募巨头招聘涌现“新剧情”

A股市场在2024年逐渐出现新的运行特征&#xff0c;这不禁让部分主动投资的私募巨头公司重新登上招聘舞台。 但这一次&#xff0c;他们的招聘方向出现了新的变动。 有些机构有意识的为公司投研团队招聘“衔接”岗&#xff0c;有些则把重点放在了投研动作的交易层。 但这都不如…

外汇的基本面分析需要关注什么?

外汇基本面分析的核心在于关注可能影响单一货币供求及国家货币价值的经济、社会和地缘政治事件与趋势。但值得注意的是&#xff0c;这些事件和因素往往具有更广泛的影响力&#xff0c;不仅限于单一国家。它们可能是影响整个地区或国家集团的重要事件&#xff0c;甚至一些事件&a…

设计师进阶指南:掌握这6条版式设计要点

布局设计是设计师的必修课。优秀的排版不是强制性的“东拼西凑”&#xff0c;而是通过设计师独特的排版获得的。这不是简单的信息列表&#xff0c;而是认真思考如何分层、有节奏地组织和安排元素。今天我将给你带来它 6 文章还附带了布局设计模板资源&#xff0c;设计师朋友一定…

【shell 学习一】shell执行方式以及变量(自定义变量、整数运算)定义

1.shell执行方式 测试脚本 vim file1 echo hello 2024 read -p 请输入 name echao hh,$name执行1 bash file1执行2 sh file1执行3 . file1执行4 source file11和2的方式&#xff0c;是子shell 3和4的方式&#xff0c;是本shell bash是进入新的命令 这时候退出edit是退出这个新…

AI办公自动化:多音频轨电影视频抽取出英语音频

很多电影视频是有中、英、粤语等多个音频轨的&#xff0c;如果直接转换成音频&#xff0c;很有可能不是自己想要的那种语音。 可以先查看音频流信息&#xff0c;确定属于哪个音频轨&#xff1a; Reading video file: E:\1-7\比得兔1.mp4 输出音频流信息 Available audio str…

学校师生都在用的电路设计神器——SmartEDA,你get到了吗?

在信息时代的浪潮下&#xff0c;电子技术的迅猛发展对人才的培养提出了更高要求。学校师生在电路设计领域&#xff0c;急需一款既方便易用又功能强大的辅助工具。今天&#xff0c;就为大家揭秘一款备受好评的电路设计工具——SmartEDA&#xff0c;看它如何助力学校师生在电路设…

【D3.js in Action 3 精译】1.2 D3 生态系统——入门须知

1.2 D3 生态系统——入门须知 D3.js 从不单打独斗&#xff0c;而是作为 D3 生态系统的一员&#xff0c;与生态内的一系列技术和工具相结合来创建丰富的 Web 界面。与其他网页一样&#xff0c;D3 项目也是充分利用 HTML5 的强大功能在 DOM 内构建出来的。尽管 D3 也可以创建并操…

LangChain结合LLM做私有化文档搜索

我们知道LLM&#xff08;大语言模型&#xff09;的底模是基于已经过期的公开数据训练出来的&#xff0c;对于新的知识或者私有化的数据LLM一般无法作答&#xff0c;此时LLM会出现“幻觉”。针对“幻觉”问题&#xff0c;一般的解决方案是采用RAG做检索增强。 但是我们不可能把…

docker in docker 在CI中应用解析

docker in docker 简介 docker里嵌套运行docker&#xff0c;本文讲解其在jenkins和gitlab-runner 种的调用流程 一、用于jenkins 容器化部署jenkins时调用docker命令集成CI功能 [rootops-demo~]# docker inspect jenkins --format"{{json .Mounts}}" [{"T…

自学网络安全,圈内大佬学习书单助你砥砺前行【网络安全书单推荐】

文章目录 [&#x1f31f;网络安全书单推荐&#x1f680;] 网络安全是保护网络系统、网络设备、通信网络和数据免受未经授权的访问、损坏或窃取的一系列措施和技术。这个领域涉及到防止网络攻击、恶意软件和其他网络威胁的发生&#xff0c;同时确保数据的机密性、完整性和可用…

CNware快照技术采用双轨服务模式,显著改善虚拟机快照执行时执行后性能下降问题|附技术原理

在数字化时代&#xff0c;虚拟化技术已成为数据中心管理与云计算领域的基石。虚拟化技术允许在单一物理服务器上运行多个独立的虚拟环境&#xff0c;即虚拟机。每个虚拟机都能拥有专属的操作系统、应用程序和配置&#xff0c;彼此隔离&#xff0c;互不影响。然而&#xff0c;如…

通用后台管理——Vue router的使用

目录 一、Vue router是什么&#xff1f; 二、下载Vue router 三、使用router 四、使用嵌套router​​​​​​​ 一、Vue router是什么&#xff1f; 官网&#xff1a;安装 | Vue Router 是Vue.js的官方路由&#xff0c;实现多页跳转到功能&#xff0c;还包括&#xff1a; …

经典小游戏(一)C实现——三子棋

switch(input){case 1:printf("三子棋\n");//这里先测试是否会执行成功break;case 0:printf("退出游戏\n");break;default :printf("选择错误&#xff0c;请重新选择!\n");break;}}while(input);//直到输入的结果为假&#xff0c;循环才会结束} …

【LangChain系列——案例分析】【基于SQL+CSV的案例分析】【持续更新中】

目录 前言一、LangChain介绍二、在SQL问答时如何更好的提示&#xff1f;2-1、安装2-2、SQLite 样例数据2-3、使用langchain与其进行交互2-4、查看模型提示语2-5、提供表定义和示例行2-6、将表信息插入到Prompt中去2-7、添加自然语言->SQL示例2-8、在向量数据库中查找最相关的…

ONLYOFFICE 8.1版本桌面编辑器测评:超越想象的办公体验!

在当今数字化办公时代&#xff0c;一个功能强大、操作便捷的办公套件对于提高工作效率至关重要。ONLYOFFICE 8.1作为一款备受瞩目的办公软件&#xff0c;凭借其全面的功能、优异的性能和出色的用户体验&#xff0c;为用户带来了超越想象的办公体验。下面&#xff0c;我们将对ON…

数据资产风险管理与合规性:全面识别、科学评估并有效应对数据风险,确保企业数据资产的安全性与合规性,为企业稳健发展提供坚实保障

一、引言 在数字化时代&#xff0c;数据资产已成为企业运营和决策的核心要素。然而&#xff0c;随着数据量的快速增长和技术的不断演进&#xff0c;数据资产面临的风险也日益增多&#xff0c;如数据泄露、数据篡改、数据滥用等。同时&#xff0c;数据保护法律法规的不断完善&a…

java基于ssm+jsp 社区生活超市管理系统

1前台首页功能模块 社区生活超市管理系统 &#xff0c;在社区生活超市管理系统可以查看首页、商品信息、我的、跳转到后台等内容&#xff0c;如图1所示。 图1系统首页界面图 用户登录、用户注册&#xff0c;通过注册填写用户账号、密码、用户姓名、性别、用户手机、送货地址等…

教你如何一键高效下载视频号直播视频

在当今视频号直播盛行的时代&#xff0c;错过精彩直播内容再也不是遗憾&#xff01;地瓜网络技术倾情推出“视频号直播视频下载器”&#xff0c;为您捕捉每一个直播瞬间。本文将简明扼要地指导您如何利用这款神器下载视频号直播与回放视频&#xff0c;让超清MP4视频轻松入库&am…