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

利用sortablejs实现拖拽排序

import Sortable from "sortablejs";

created() {//禁止火狐拖拽进行搜索document.body.ondrop = function(event){event.preventDefault();event.stopPropagation();}}// 打开对话框的时候调用下openCustomDialog(){this.rowDrop()}// 行拖拽
rowDrop() {this.$nextTick(() => {this.sortable1 = Sortable.create(document.querySelector(".form_table .el-table__body-wrapper tbody"),{handle: ".drag-btn",onEnd: ({ newIndex, oldIndex }) => {this.tableData.splice(newIndex,0,this.tableData.splice(oldIndex, 1)[0]);var newArray = this.tableData.slice(0);this.tableData = [];this.$nextTick(function () {this.tableData = newArray;});},});});
},
      <el-dialogtitle="自定义":visible.sync="customDialogVisible"v-if="customDialogVisible":append-to-body="true"width="20%"><el-table:data="tableData"class="form_table"borderfithighlight-current-row><el-table-columnprop="sort"label="拖拽更换顺序"align="center"><i class=" el-icon-sort drag-btn"></i></el-table-column><el-table-columnprop="desc"label="图片类型"align="center"></el-table-column></el-table><div class="btns"><el-button @click="cancelCustomDialog">取消</el-button><el-button type="primary" @click="confirmCustomDialog" :loading="loading">确定</el-button></div></el-dialog>

<style scoped>
//悬停出现鼠标
.drag-btn{cursor: pointer;
}
</style>

注意:drag-btn 这个可以修改,但是上下要对应上

相关文章:

利用sortablejs实现拖拽排序

import Sortable from "sortablejs";created() {//禁止火狐拖拽进行搜索document.body.ondrop function(event){event.preventDefault();event.stopPropagation();}}// 打开对话框的时候调用下openCustomDialog(){this.rowDrop()}// 行拖拽 rowDrop() {this.$nextTi…...

超越AnimateAnyone, 华中科大中科大阿里提出Unimate,可以根据单张图片和姿势指导生成视频。

阿里新发布的UniAnimate&#xff0c;与 AnimateAnyone 非常相似&#xff0c;它可以根据单张图片和姿势指导生成视频。项目核心技术是统一视频扩散模型&#xff0c;通过将参考图像和估计视频内容嵌入到共享特征空间&#xff0c;实现外观和动作的同步。 相关链接 项目&#xff1…...

【MDK5问题】:MDK5无法跳转,并且提示:no browse information available in xxxxx

1、问题&#xff1a; MDK5原来的函数调用可以直接跳转到原函数&#xff0c;但是出现不能跳转原函数的情况&#xff0c;且提示&#xff1a;no browse information available in xxxxx 的情况&#xff1b; 2、解决&#xff1a; 如下图所示&#xff1a;在魔术棒&#xff08;pro…...

OS中断机制-外部中断触发

中断函数都定义在中断向量表中,外部中断通过中断跳转指令触发中断向量表中的中断服务函数,中断指令可以理解为由某个中断寄存器的状态切换触发的汇编指令,这个汇编指令就是中断跳转指令外部中断通过在初始化的时候使能对应的中断服务函数如何判断外部中断被触发的条件根据Da…...

LabVIEW如何进行电磁兼容性测试

电磁兼容性&#xff08;EMC&#xff09;测试是确保电子设备在其工作环境中能够正常运行且不会对其他设备产生有害干扰的关键步骤。LabVIEW作为一种强大的系统设计和开发工具&#xff0c;可以有效地用于电磁兼容性测试。以下是如何使用LabVIEW进行电磁兼容性测试的详细步骤和方法…...

Spring底层架构核心概念总结

Spring底层架构核心概念总结 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; Spring框架是Java企业级应用开发中最受欢迎的框架之一。它以其强大的依赖注入&am…...

hex、bin、elf、s19等文件格式介绍以及格式转换

文章目录 前言一、bin文件二、hex文件数据记录格式扩展线性地址记录(HEX386)格式扩展段地址记录(HEX86)文件结束(EOF)记录三、elf文件四、S19文件五、不同格式之间转换将bin文件转换成hex文件将hex文件转换成bin文件将bin文件转换成s19文件前言 编译器或汇编器将程序的源代码(…...

oracle 窗口函数使用

Oracle 数据库中的窗口函数&#xff08;也称为分析函数或OLAP函数&#xff09;允许您对一组相关的行执行计算&#xff0c;而不是只针对单行。这些函数在数据分析中特别有用&#xff0c;因为它们允许您执行诸如计算移动平均值、累积总和、百分比排名等操作。 以下是一些常用的 …...

【Git】git常用命令

初始化配置 设置用户名和邮箱&#xff0c;来标识身份&#xff0c;方便日后上传GitHub git config --global user.name "xxx" git config --global user.email "xxx"git config --global --list # 存用户名和密码 git config --global --list # 查看配置新…...

【Proteus仿真】【Arduino单片机】寻迹避障蓝牙遥控小车

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使LCD1602液晶&#xff0c;L298电机&#xff0c;直流电机&#xff0c;HC05/06蓝牙模块&#xff0c;HCSR04超声波&#xff0c;红外寻迹模块等。 主…...

嵌入式实验---实验八 ADC电压采集实验

一、实验目的 1、掌握STM32F103ADC电压采集程序设计流程&#xff1b; 2、熟悉STM32固件库的基本使用。 二、实验原理 1、使用STM32F103R6采集可变电阻上的电压信号&#xff0c;并通过计算把当前ADC转换值和电压值显示在LCD1602液晶屏上&#xff1b; 2、对照电压表读数&…...

PHP框架详解:Symfony框架的深度剖析

PHP框架详解&#xff1a;Symfony框架的深度剖析 摘要&#xff1a; Symfony是当前最受欢迎的PHP框架之一&#xff0c;它以其强大的功能和灵活性而闻名。本文将详细介绍Symfony框架的核心概念、架构、组件以及其实践应用&#xff0c;帮助读者深入理解这一框架的优势和使用场景。…...

Linux `screen` 命令详解与使用指南

Linux screen 命令详解与使用指南 在Linux系统中&#xff0c;screen 是一个非常有用的工具&#xff0c;它允许用户在单个终端会话中运行多个进程&#xff0c;并能在会话之间切换。screen 特别适用于远程登录&#xff08;如通过SSH&#xff09;时&#xff0c;确保即使网络连接断…...

CSRF绕过

目录 1. 检查referer referer绕过 2. 检查origin 3. Cookie检查 SameSite 持久性验证 4. Token检查 检测token编码类型,尝试篡改token 绕过token检测 在页面上尝试修改密码, 观察请求的格式. 绕过思路 1. 编写一个js脚本完成以下的任务: 2. 引诱登录的用户触发这…...

如何处理Java中的BufferOverflowException异常?

如何处理Java中的BufferOverflowException异常&#xff1f; 大家好&#xff0c;我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 在Java编程中&#xff0c;BufferOverflowExceptio…...

XMLTomcatHttp协议

XML&Tomcat&Http协议 目录 XML&Tomcat&Http协议 1. xml解析(了解) 1.1 配置文件 1.1.1 配置文件的作用 1.1.2 常见的配置文件类型 1.2 properties文件 1.2.1 文件示例 1.2.2 语法规范 1.3 XML文件 1.3.1 文件示例 1.3.2 概念介绍 1.3.3 XML的基本语…...

Lua优化技巧

常见的Lua优化小技巧 Lua常见优化点&#xff1a;1. 尽量使用局部变量2. table的相关减少对表的访问for循环预分配表空间元表 3. string的相关4. 避免运行时加载编译5. 尽量避免频繁创建临时对象闭包表 Lua常见优化点&#xff1a; 1. 尽量使用局部变量 尽量将变量局部化&#x…...

探索CSS中的cursor鼠标属性

在网页设计中&#xff0c;细节决定成败。CSS的cursor属性是这些细节中的关键一环&#xff0c;它不仅影响着网页的美观&#xff0c;更关乎用户体验。今天&#xff0c;我们就来深入了解一下cursor属性&#xff0c;看看如何通过它来增强网页的交互性。 cursor属性概览 cursor属性…...

图象去噪1-使用中值滤波与均值滤波

1、中值滤波 使用中值滤波去除图像的异常像素点&#xff0c;使用cv2.cv2.medianBlur(img, 3)表示再图像在中值滤波窗口3*3的范围内&#xff0c;从下到大排序&#xff0c;将当前值替换为排序中值&#xff08;如下图所示&#xff09;将56替换为&#xff08;56&#xff0c;66,90,…...

微软Edge浏览器全解析

微软Edge浏览器是一款由微软开发的现代网页浏览器&#xff0c;旨在为用户提供高效、安全和可定制的浏览体验。 这款浏览器最初于2015年发布&#xff0c;作为Internet Explorer&#xff08;IE&#xff09;的继任者&#xff0c;并随着Windows 10操作系统一同亮相。然而&#xff0…...

网盘下载加速工具LinkSwift:八大主流网盘直链下载解决方案

网盘下载加速工具LinkSwift&#xff1a;八大主流网盘直链下载解决方案 【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 &#xff0c;支持 百度网盘 / 阿里云盘 / 中国移动云盘 / …...

SenseVoice-Small ONNX开源方案:支持私有化部署的国产语音识别新标杆

SenseVoice-Small ONNX开源方案&#xff1a;支持私有化部署的国产语音识别新标杆 1. 项目简介 SenseVoice-Small ONNX是一个专为普通硬件设计的轻量化语音识别工具。基于FunASR开源框架的SenseVoiceSmall模型&#xff0c;通过Int8量化技术大幅降低资源消耗&#xff0c;让语音…...

【实验原理深度解析】弗兰克-赫兹实验:如何用电子“碰撞”揭示原子能级的秘密

1. 电子与原子的"对话"&#xff1a;弗兰克-赫兹实验的设计哲学 想象你站在一个漆黑的房间里&#xff0c;向对面墙壁投掷网球。如果墙壁是实心的&#xff0c;球会直接弹回&#xff1b;但如果墙上有一排高度不同的窗口&#xff0c;球只有达到特定速度才能穿过对应高度的…...

免费开源AI绘画工具推荐:Z-Image-Turbo,照片级质量,消费级显卡友好

免费开源AI绘画工具推荐&#xff1a;Z-Image-Turbo&#xff0c;照片级质量&#xff0c;消费级显卡友好 1. 为什么选择Z-Image-Turbo 在众多开源AI绘画工具中&#xff0c;Z-Image-Turbo以其独特的优势脱颖而出。作为阿里巴巴通义实验室开源的高效文生图模型&#xff0c;它完美…...

Kafka消费者在大数据生态中的集成:从数据湖到AI管道的完整架构

一、引言在数字化转型的浪潮中&#xff0c;企业对数据处理的需求已从传统的批处理模式转向实时化、高并发的场景。无论是金融风控中的毫秒级欺诈检测、电商交易中的个性化实时推荐&#xff0c;还是物联网监控中的异常预警&#xff0c;实时数据流处理能力已成为业务竞争力的核心…...

FGA智能自动战斗全攻略:解放双手,高效玩转F/GO

FGA智能自动战斗全攻略&#xff1a;解放双手&#xff0c;高效玩转F/GO 【免费下载链接】FGA FGA - Fate/Grand Automata&#xff0c;一个为F/GO游戏设计的自动战斗应用程序&#xff0c;使用图像识别和自动化点击来辅助游戏&#xff0c;适合对游戏辅助开发和自动化脚本感兴趣的程…...

疯了!用 AI 做销售,一人能干三人活,效率直接拉满!

一、AI 秒出全场景话术&#xff0c;告别绞尽脑汁从破冰开场、持续跟进&#xff0c;到异议处理、逼单成交&#xff0c;AI 都能根据产品、客户、场景一键生成专业话术。新人不用死记硬背&#xff0c;复制粘贴就能专业沟通&#xff1b;老人不用反复修改&#xff0c;节省大把时间&a…...

HelixDB安全特性解析:类型安全查询如何确保生产环境可靠性

HelixDB安全特性解析&#xff1a;类型安全查询如何确保生产环境可靠性 【免费下载链接】helix-db HelixDB is a powerful, graph-vector database built entirely in Rust for millisecond query latency and ease of use. 项目地址: https://gitcode.com/gh_mirrors/he/heli…...

利用Dify平台快速搭建InternLM2-Chat-1.8B智能应用

利用Dify平台快速搭建InternLM2-Chat-1.8B智能应用 你是不是也遇到过这种情况&#xff1a;好不容易在服务器上部署了一个像InternLM2-Chat-1.8B这样的开源大模型&#xff0c;感觉它能力挺强&#xff0c;但除了在命令行里一问一答&#xff0c;就不知道怎么把它变成一个真正能用…...

YOLO12开源模型合规部署:离线环境+审计日志+模型版本固化方案

YOLO12开源模型合规部署&#xff1a;离线环境审计日志模型版本固化方案 1. 项目背景与核心价值 YOLO12作为Ultralytics在2025年推出的最新实时目标检测模型&#xff0c;在保持高速推理性能的同时显著提升了检测精度。其引入的注意力机制优化了特征提取网络&#xff0c;nano版…...