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

vue利用 sortable 完成表格拖拽

先讲一下vue2,使用sortable完成表格拖拽【不只是表格,div也可以实现,但我项目中是表格拖拽】
github地址

安装

npm install sortablejs --save

使用
(我的项目中是拖拽一个小按钮移动,而不是整行)

<template>...<el-table-columnmin-width="10%"class-name="drag"><template><iclass="iconfont icon-move"/></template></el-table-column>...
</template>import Sortable from 'sortablejs';private setSort () {const tbody = document.querySelector('.el-table__body-wrapper tbody');// eslint-disable-next-line @typescript-eslint/no-this-aliasconst that = this;Sortable.create(tbody, {handle: '.drag', // 仅class-name=“drag”那一列可拖拽animation: 180,delay: 0,onEnd ({ newIndex, oldIndex }) {const currRow = that.dataList.splice(oldIndex, 1)[0];that.dataList.splice(newIndex, 0, currRow);}});}

中文文档
大家可以详细看一下这个文档,每个参数都给了解释;

接下来是vue3项目中拖拽div,上面那个只是支持vue2,vue3使用的是draggable
github地址

实现的效果
请添加图片描述
有多个车厢,一个车厢分为上下两个区域;车厢与车厢之间不允许拖拽;车厢上下区域允许拖拽;

安装

npm i -S vuedraggable@next

使用

上方拖拽<draggable:list="item.right_side":animation="200":group="item.carriage_name":itemKey="item.carriage_name + ''":class="`list-group ${item.right_side.length < 8 ? 'list-group-center' : ''}`"><template #item="{ element }"><div class="list-group-item"><div class="name">{{ element.origin_region_name }}<span class="reuse_type">{{ element.other_flag }}</span><span class="reuse_type">({{ element.reuse_type[0] }})</span></div><div class="top" /></div></template></draggable>
...
图片
...
下方拖拽import draggable from 'vuedraggable';

官网有很多例子
常用参数有以下这几个

请添加图片描述

相关文章:

vue利用 sortable 完成表格拖拽

先讲一下vue2&#xff0c;使用sortable完成表格拖拽【不只是表格&#xff0c;div也可以实现&#xff0c;但我项目中是表格拖拽】 github地址 安装 npm install sortablejs --save使用 &#xff08;我的项目中是拖拽一个小按钮移动&#xff0c;而不是整行&#xff09; <te…...

CNN简介3

...

新能源电动车充电桩控制主板安全特点

新能源电动车充电桩控制主板安全特点 你是否曾经担心过充电桩的安全问题?充电桩主板又是什么样的呢?今天我们就来聊聊这个话题。 充电桩主板采用双重安全防护系统&#xff0c;包括防水、防护、防尘等&#xff0c;确保充电桩安全、可靠。不仅如此&#xff0c;充电桩主板采用先…...

公路桥梁有哪些安全隐患?

在现代社会&#xff0c;公路桥梁作为连接城市、串联交通的重要纽带&#xff0c;扮演着无可替代的角色。然而&#xff0c;我们常常忽视的是&#xff0c;这些高架构筑物也存在着潜在的安全隐患&#xff0c;可能随时影响着交通的畅通和人们的生命财产安全。为了更好地认识和理解这…...

【C语言】每日一题(错误的集合)

最近在牛客、力扣上做题&#xff0c;花费海量时间&#xff0c;苦不堪言&#xff0c;有时绞尽脑汁也想不出&#xff0c;痛定思痛&#xff0c;每日记录写的比较困难的题。 错误的集合 题目如上图所示 题主乍看之下觉得很简单&#xff0c;再看例子&#xff0c;不就是一个有序数组…...

[JavaWeb]【四】web后端开发-SpringBootWeb入门

目录 一 Spring 二 SpringBootWeb入门 2.1 入门需求 2.2 分析 2.3 开始创建SpringBootWeb 2.4 创建类实现需求 2.5 启动程序 2.6 访问 三 HTTP协议 3.1 HTTP-概述 3.2 HTTP-请求协议 3.3 HTTP-响应协议 3.3.1 响应状态码 && 响应类型 3.4 HTTP-协议解析 前言…...

前端css

day03-CSS基础 目标&#xff1a;掌握 CSS 属性基本写法&#xff0c;能够使用文字相关属性美化文章页。 01-CSS初体验 层叠样式表 (Cascading Style Sheets&#xff0c;缩写为 CSS&#xff09;&#xff0c;是一种 样式表 语言&#xff0c;用来描述 HTML 文档的呈现&#xff08;…...

vb+sql医院门诊管理系统设计与系统

摘要 信息时代已经来临,计算机应用于医院的日常管理,为医院的现代化带来了从未有过的动力和机遇,为医疗卫生领域的发展提供了无限的潜力。采用计算机管理信息系统已成为医院管理科学化和现代化的标志,给医院带来了明显的经济效益和社会效益。 本文介绍了数据库管理系统的…...

bootstrap-modal调用ajax后不经过回调函数

说明&#xff1a;我用的是boostrap的弹框&#xff0c;表单用的是layui的&#xff0c;个人觉得bootstrap比layui的弹框好看点&#xff0c;能自适应高度。 如图&#xff1a;点击保存后里面的内容不执行 原因&#xff1a;type用的是submit 解决&#xff1a;把submit改为button...

【【典型电路设计之片内存储器的设计之RAM的Verilog HDL描述一】】

典型电路设计之片内存储器的设计之RAM的Verilog HDL描述一 RAM是随机存储器&#xff0c;存储单元的内容可按需随意取出或存入。这种存储器在断电后将丢失所有数据&#xff0c;一般用来存储一些短时间内使用的程序和数据。 其内部结构如下图所示&#xff1a; 例&#xff1a;用…...

食品行业案例 | 燕千云助力头部食品企业搭建数智化 IT服务管理体系及平台

随着数字化时代的到来&#xff0c;食品行业呈现出多个发展趋势。首先&#xff0c;消费者对健康食品和功能性食品的关注度提高&#xff0c;推动了市场需求的增长。其次&#xff0c;便利食品和物流行业迅速发展&#xff0c;满足了快节奏生活的需求。再者&#xff0c;电商渠道和网…...

SpringBoot的日志信息及Lombok的常用注解

文章目录 一. 日志的介绍1. 什么是日志2. 日志的作用 二. 日志的使用1. 日志格式说明2. 自定义日志的输出3. 日志级别4. 日志级别的配置5. 日志持久化6. 更简单的输出日志-Lomok7. Lombok框架实现原理以及其他常见注解 一. 日志的介绍 1. 什么是日志 日志是我们程序重要组成部…...

Genoss GPT简介:使用 Genoss 模型网关实现多个LLM模型的快速切换与集成

一、前言 生成式人工智能领域的发展继续加速&#xff0c;大型语言模型 (LLM) 的用途范围不断扩大。这些用途跨越不同的领域&#xff0c;包括个人助理、文档检索以及图像和文本生成。ChatGPT 等突破性应用程序为公司进入该领域并开始使用这项技术进行构建铺平了道路。 大公司正…...

淘宝API接口的实时数据和缓存数据区别

电商API接口实时数据是指通过API接口获取到的与电商相关的实时数据。这些数据可以包括商品库存、订单状态、销售额、用户活跃度等信息。 通过电商API接口&#xff0c;可以实时获取到电商平台上的各种数据&#xff0c;这些数据可以帮助企业或开发者做出及时的决策和分析。例如&…...

excel统计函数篇1之average系列

一、excel中的统计函数 1、AVERAGE(number1,number2,...)&#xff1a;返回其参数的平均值 2、AAVERAGEA(value1,value2,...)&#xff1a;返回其参数的平均值&#xff0c;包括数字、文本和逻辑值 可以在括号内手动输入&#xff0c;也可以引用单元格&#xff0c;对序列求平均的…...

数学建模(二)线性规划

课程推荐&#xff1a;6 线性规划模型基本原理与编程实现_哔哩哔哩_bilibili 目录 一、线性规划的实例与定义 1.1 线性规划的实例 1.2 线性规划的定义 1.3 最优解 1.4 线性规划的Mathlab标准形式 1.5 使用linprog函数 二、线性规划模型建模实战与代码 2.1 问题提出 2.2…...

小白到运维工程师自学之路 第七十三集 (kubernetes应用部署)

一、安装部署 1、以Deployment YAML方式创建Nginx服务 这个yaml文件在网上可以下载 cat nginx-deployment.yaml apiVersion: apps/v1 #apiVersion是当前配置格式的版本 kind: Deployment #kind是要创建的资源类型&#xff0c;这里是Deploymnet metadata: #metadata是该资源…...

联合仿真 ADAMS 和 SIMULINK步骤

1、把 control 中的 ball_beam 文件 copy 到另外一个文件夹下&#xff0c; 同时设置adams和matlab的默认路径即为ball_beam文件夹&#xff0c; 这样可以省略很多不必要的麻烦&#xff01; 2、用 aview 打开 ball_beam.cmd 文件&#xff0c;先试试仿真一下&#xff0c;可 以看到…...

【C++精华铺】7.C++内存管理

目录 1. C语言动态内存管理 2. C内存管理方式 2.1 new/delete和new T[]/delete[] 2.1.1 操作内置类型 2.1.2 操作自定义类型 2.2 new/delete和new T[]/delete[]的原理 2.2.1 原理 2.2.2 operator new和operator delete 2.2.3 new T[]的特殊处理&#xff08;可以…...

牛客网华为OD前端岗位,面试题库练习记录02

题目一 删除字符串中出现次数最少的字符(HJ23) JavaScript Node ACM 模式 const rl require("readline").createInterface({ input: process.stdin }); var iter rl[Symbol.asyncIterator](); const readline async () > (await iter.next()).value;void (asyn…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号&#xff08;第三种&#xff09;后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...