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

用html+jq实现元素的拖动效果——js基础积累

news 来源：原创 2025/7/1 12:47:31

用html+jq实现元素的拖动效果

效果图如下：
在这里插入图片描述
将【item10】拖动到【item1】前面

直接上代码：

html部分

<ul id="sortableList"><li id="item1" class="w1" draggable="true">Item 1</li><li id="item2" class="w2" draggable="true">Item 2</li><li id="item3" class="w3" draggable="true">Item 3</li><li id="item4" class="w1" draggable="true">Item 4</li><li id="item5" class="w1" draggable="true">Item 5</li><li id="item6" class="w2" draggable="true">Item 6</li><li id="item7" class="w3" draggable="true">Item 7</li><li id="item8" class="w1" draggable="true">Item 8</li><li id="item9" class="w2" draggable="true">Item 9</li><li id="item10" class="w3" draggable="true">Item 10</li>
</ul>

js部分

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>document.addEventListener('DOMContentLoaded', function () {const sortableList = document.getElementById('sortableList');const items = sortableList.querySelectorAll('li');items.forEach((item) => {item.addEventListener('dragstart', dragStart);item.addEventListener('dragover', dragOver);item.addEventListener('drop', drop);item.addEventListener('dragenter', dragEnter);item.addEventListener('dragleave', dragLeave);});function dragStart(e) {e.dataTransfer.setData('text/plain', e.target.id);// setTimeout(() => {//     e.target.classList.add('hide');// }, 0);console.log('Drag started:', e.target.id);}function dragOver(e) {e.preventDefault();e.target.classList.add('over');console.log('Drag over:', e.target.id);}function dragEnter(e) {e.preventDefault();console.log('Drag enter:', e.target.id);}function dragLeave(e) {e.target.classList.remove('over');console.log('Drag leave:', e.target.id);}function drop(e) {e.preventDefault();const draggedItemId = e.dataTransfer.getData('text/plain');const draggedItem = document.getElementById(draggedItemId);const targetItem = e.target;if (targetItem !== draggedItem) {const targetIndex = Array.from(items).indexOf(targetItem);const draggedIndex = Array.from(items).indexOf(draggedItem);if (targetIndex > draggedIndex) {targetItem.parentNode.insertBefore(draggedItem,targetItem.nextSibling);} else {targetItem.parentNode.insertBefore(draggedItem, targetItem);}}e.target.classList.remove('over');draggedItem.classList.remove('hide');console.log('Drop:', e.target.id);console.log('在这里加检查宽度方法');checkWidth();}});// 检查宽度function checkWidth(first = true) {//清空空白块if (first) $('#sortableList li.box').remove();//盒子宽度let boxWidth = document.getElementById('sortableList').offsetWidth;//当前li行的宽度let rowLiWidth = 0;//循环lifor (let i = 0; i < $('#sortableList li').length; i++) {var outerWidthWithMargin = $('#sortableList li').eq(i).outerWidth(true);var itemWidth = parseFloat(outerWidthWithMargin.toFixed(2));console.log(i, rowLiWidth, itemWidth);//当前li行的宽度+当前项宽度let RAW = rowLiWidth + itemWidth;//如果当前li行的宽度+当前项宽度大于盒子宽度，则添加空白块，并重新计算。//3是容错宽度。if (RAW >= boxWidth ||(RAW - boxWidth >= -3 && RAW - boxWidth <= 3)) {//宽度大于盒子宽度，则添加空白块，并重新计算。if (RAW > boxWidth) {let thisWidth = boxWidth - rowLiWidth;if (thisWidth > 3) {$('#sortableList li').eq(i).before(`<li class="box" style="width:${thisWidth}px"></li>`);rowLiWidth = 0; //重新计算。checkWidth(false);break;}}rowLiWidth = 0; //重新计算。} else {rowLiWidth += itemWidth;}if (i == $('#sortableList li').length - 1) {let thisWidth = boxWidth - rowLiWidth;$('#sortableList li').eq(i).after(`<li class="box" style="width:${thisWidth}px"></li>`);break;}}}</script>

css部分

 <style>* {box-sizing: border-box;}#sortableList {list-style-type: none;padding: 0;display: flex;flex-wrap: wrap;position: relative;}#sortableList:after {border-top: none;border-left: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}#sortableList:after,#sortableList li:after {content: '';border: 1px solid #eee;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}#sortableList li:after {border-right: none;border-bottom: none;}#sortableList li {padding: 8px;background-color: #fff;cursor: move;position: relative;}#sortableList li.box {background-color: #fff;}#sortableList li.over {border: 2px dashed #000;}#sortableList li.w1 {width: 20%;}#sortableList li.w2 {width: 30%;}#sortableList li.w3 {width: 50%;}#sortableList li.hide {display: none;}</style>

完整版代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><title>Title</title><style>* {box-sizing: border-box;}#sortableList {list-style-type: none;padding: 0;display: flex;flex-wrap: wrap;position: relative;}#sortableList:after {border-top: none;border-left: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}#sortableList:after,#sortableList li:after {content: '';border: 1px solid #eee;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;pointer-events: none;}#sortableList li:after {border-right: none;border-bottom: none;}#sortableList li {padding: 8px;background-color: #fff;cursor: move;position: relative;}#sortableList li.box {background-color: #fff;}#sortableList li.over {border: 2px dashed #000;}#sortableList li.w1 {width: 20%;}#sortableList li.w2 {width: 30%;}#sortableList li.w3 {width: 50%;}#sortableList li.hide {display: none;}</style></head><body><ul id="sortableList"><li id="item1" class="w1" draggable="true">Item 1</li><li id="item2" class="w2" draggable="true">Item 2</li><li id="item3" class="w3" draggable="true">Item 3</li><li id="item4" class="w1" draggable="true">Item 4</li><li id="item5" class="w1" draggable="true">Item 5</li><li id="item6" class="w2" draggable="true">Item 6</li><li id="item7" class="w3" draggable="true">Item 7</li><li id="item8" class="w1" draggable="true">Item 8</li><li id="item9" class="w2" draggable="true">Item 9</li><li id="item10" class="w3" draggable="true">Item 10</li></ul><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>document.addEventListener('DOMContentLoaded', function () {const sortableList = document.getElementById('sortableList');const items = sortableList.querySelectorAll('li');items.forEach((item) => {item.addEventListener('dragstart', dragStart);item.addEventListener('dragover', dragOver);item.addEventListener('drop', drop);item.addEventListener('dragenter', dragEnter);item.addEventListener('dragleave', dragLeave);});function dragStart(e) {e.dataTransfer.setData('text/plain', e.target.id);// setTimeout(() => {//     e.target.classList.add('hide');// }, 0);console.log('Drag started:', e.target.id);}function dragOver(e) {e.preventDefault();e.target.classList.add('over');console.log('Drag over:', e.target.id);}function dragEnter(e) {e.preventDefault();console.log('Drag enter:', e.target.id);}function dragLeave(e) {e.target.classList.remove('over');console.log('Drag leave:', e.target.id);}function drop(e) {e.preventDefault();const draggedItemId = e.dataTransfer.getData('text/plain');const draggedItem = document.getElementById(draggedItemId);const targetItem = e.target;if (targetItem !== draggedItem) {const targetIndex = Array.from(items).indexOf(targetItem);const draggedIndex = Array.from(items).indexOf(draggedItem);if (targetIndex > draggedIndex) {targetItem.parentNode.insertBefore(draggedItem,targetItem.nextSibling);} else {targetItem.parentNode.insertBefore(draggedItem, targetItem);}}e.target.classList.remove('over');draggedItem.classList.remove('hide');console.log('Drop:', e.target.id);console.log('在这里加检查宽度方法');checkWidth();}});// 检查宽度function checkWidth(first = true) {//清空空白块if (first) $('#sortableList li.box').remove();//盒子宽度let boxWidth = document.getElementById('sortableList').offsetWidth;//当前li行的宽度let rowLiWidth = 0;//循环lifor (let i = 0; i < $('#sortableList li').length; i++) {var outerWidthWithMargin = $('#sortableList li').eq(i).outerWidth(true);var itemWidth = parseFloat(outerWidthWithMargin.toFixed(2));console.log(i, rowLiWidth, itemWidth);//当前li行的宽度+当前项宽度let RAW = rowLiWidth + itemWidth;//如果当前li行的宽度+当前项宽度大于盒子宽度，则添加空白块，并重新计算。//3是容错宽度。if (RAW >= boxWidth ||(RAW - boxWidth >= -3 && RAW - boxWidth <= 3)) {//宽度大于盒子宽度，则添加空白块，并重新计算。if (RAW > boxWidth) {let thisWidth = boxWidth - rowLiWidth;if (thisWidth > 3) {$('#sortableList li').eq(i).before(`<li class="box" style="width:${thisWidth}px"></li>`);rowLiWidth = 0; //重新计算。checkWidth(false);break;}}rowLiWidth = 0; //重新计算。} else {rowLiWidth += itemWidth;}if (i == $('#sortableList li').length - 1) {let thisWidth = boxWidth - rowLiWidth;$('#sortableList li').eq(i).after(`<li class="box" style="width:${thisWidth}px"></li>`);break;}}}</script></body>
</html>

用html+jq实现元素的拖动效果——js基础积累

用htmljq实现元素的拖动效果效果图如下： 将【item10】拖动到【item1】前面直接上代码： html部分 <ul id"sortableList"><li id"item1" class"w1" draggable"true">Item 1</li><li …...

编程日记 2025/7/1 12:47:31

Zookeeper的通知机制是什么?

大家好，我是锋哥。今天分享关于【Zookeeper的通知机制是什么?】面试题。希望对大家有帮助； Zookeeper的通知机制是什么? 1000道互联网大厂Java工程师精选面试题-Java资源分享网 Zookeeper的通知机制主要通过Watcher实现，它是Zookeeper客…...

编程日记 2025/7/1 12:11:34

VSCode如何关闭Vite项目本地自启动

某些情况下VSCode打开Vite项目不需要自动启动，那么如何关闭该功能文件>首选项>设置搜索vite 将Vite:Auto Start 勾选取消即可...

编程日记 2025/7/1 12:29:24

微软表示不会使用你的 Word、Excel 数据进行 AI 训练

微软否认使用 Microsoft 365 应用程序（包括 Word、Excel 和 PowerPoint）收集数据来训练公司人工智能 (AI) 模型的说法。此前，Tumblr 的一篇博文声称，雷德蒙德使用“互联体验”功能抓取客户的 Word 和 Excel 数据，用…...

编程日记 2025/7/1 11:10:20

Redis缓存设计与性能优化

多级缓存架构缓存设计缓存穿透缓存穿透是指查询一个根本不存在的数据，缓存层和存储层都不会命中，通常出于容错的考虑，如果从存储层查不到数据则不写入缓存层。缓存穿透将导致不存在的数据每次请求都要到存储层去查询，失去了…...

编程日记 2025/7/1 3:54:01

前端图像处理(三)

目录一、大文件分片二、图片添加防篡改水印 2.1、主图水印图（vue2） 2.2、主图文字（vue3） 一、大文件分片并行传输：多个数据块可以同时并行传输，利用多线程或多路复用技术提高传输效率；减…...

编程日记 2025/7/1 11:53:52

JAVA设计模式，动态代理模式

动态代理（Dynamic Proxy）是Java中一种非常有用的设计模式。它允许在运行时创建一个实现了一组给定接口的新类。这种模式主要用于当需要为某个对象提供一个代理以控制对该对象的访问时。通过这种方式，可以添加额外的功能，如事务管理…...

编程日记 2025/7/1 11:30:56

谈论 PHP与XSS

本文将讨论一些脚本攻击问题，以及如何解决XSS脚本攻击问题美好的周末就用来学点知识吧！！！ ———————————————————————————————————— 文章目录 XSS跨站脚本攻击XSS是什么XSS类型：反…...

编程日记 2025/7/1 11:26:05

基于Java Springboot武汉市公交路线查询APP且微信小程序

一、作品包含源码数据库设计文档万字PPT全套环境和工具资源部署教程二、项目技术前端技术：Html、Css、Js、Vue、Element-ui 数据库：MySQL 后端技术：Java、Spring Boot、MyBatis 三、运行环境开发工具：IDEA/eclipse 微信…...

编程日记 2025/7/1 11:21:20

106.【C语言】数据结构之二叉树的三种递归遍历方式

目录 1.知识回顾 2.分析二叉树的三种遍历方式 1.总览 2.前序遍历 3.中序遍历 4.后序遍历 5.层序遍历 3.代码实现 1.准备工作 2.前序遍历函数PreOrder 测试结果 3.中序遍历函数InOrder 测试结果 4.后序遍历函数PostOrder 测试结果 4.底层分析 1.知识回顾在99.…...

编程日记 2025/6/30 16:11:29

解决WebView写入localstorage但首次加载取不到值的问题

本文是解决Android写localstorage的问题。在android中，native经常需要和h5页面进行交互，比如将本地token写入h5，然后h5中的js获取token进行api请求。写入localstorage的方法很标准，即在webview的onPageFinished中注入并调用一…...

编程日记 2025/7/1 3:28:00

CTF-PWN glibc源码阅读[1]: 寻找libc中堆结构的定义(2.31-0ubuntu9.16)

源代码在这里下载来到malloc/malloc.c 在980行发现这段代码 // 定义最大 mmap 值为 -4 #define M_MMAP_MAX -4// 如果没有定义 DEFAULT_MMAP_MAX，则将其定义为 65536 #ifndef DEFAULT_MMAP_MAX #define DEFAULT_MMAP_MAX (65536) #endif// 引…...

编程日记 2025/7/1 11:30:56

Node.js 实战：爬取百度新闻并序列化 - 完整教程

很多时候我们需要爬取一些公开的网页内容来做一些数据分析和统计。而多数时候，大家会用到python ，因为实现起来很方便。但是其实Node.js 用来爬取网络内容，也是非常强大的。今天我向大家介绍一下我自己写的一个百度新闻的爬虫，可…...

编程日记 2025/6/28 21:06:49

C++知识整理day3类与对象（下）——赋值运算符重载、取地址重载、列表初始化、友元、匿名对象、static

文章目录 1.赋值运算符重载1.1 运算符重载1.2 赋值运算符重载 2.取地址重载2.1 const成员函数2.2 取地址运算符重载 3.类与对象的补充3.1 再探构造函数---初始化列表3.2 类型转换3.3 static成员3.4 友元3.5 内部类3.6 匿名对象3.7 对象拷贝时的编译器优化 1.赋值运算符重载赋…...

编程日记 2025/6/28 21:12:28

【计算机网络】实验6：IPV4地址的构造超网及IP数据报

实验 6：IPV4地址的构造超网及IP数据报一、实验目的加深对IPV4地址的构造超网（无分类编制）的了解。加深对IP数据包的发送和转发流程的了解。二、实验环境 • Cisco Packet Tracer 模拟器三、实验内容 1、了解IPV4地址的构造超网…...

编程日记 2025/6/28 21:01:10

【服务器问题】xshell 登录远程服务器卡住（而 vscode 直接登录不上）

打开 xshell ssh 登录远程服务器：卡在下面这里，迟迟不继续当 SSH 连接卡在 Connection established. 之后，但没有显示远程终端提示符时，这通常意味着连接已经成功建立，说明不是网络连接和服务器连接问题，…...

编程日记 2025/6/28 20:44:28

node.js基础学习-querystring模块-查询字符串处理（三）

一、前言 querystring是 Node.js 中的一个内置模块，主要用于处理 URL 查询字符串。它提供了一些实用的方法来解析和格式化查询字符串，使得在处理 HTTP 请求中的查询参数等场景时非常方便。还可以防止sql注入二、解析查询字符串（parse方法&a…...

编程日记 2025/6/28 1:31:16

【C++】深入优化计算题目分析与实现

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯第一题：圆的计算我的代码实现代码分析改进建议改进代码老师的代码实现代码分析可以改进的地方改进代码 💯第二题：对齐输出我的代码实现…...

编程日记 2025/6/30 9:09:55

【一起学习三维GIS】Cesium基础功能和项目讲解

一、Cesium整体介绍 Cesium正式发布于 2014 年，是一个完全开源的基于 WebGL 的 JavaScript框架，无需安装插件即可创建具有最佳性能、精度、视觉质量和易用性的世界级三维地球影像和地图，并且具有丰富的开源社区内容。 Cesium 作为一个较为…...

编程日记 2025/6/28 20:15:22

【docker】Overlay网络

什么是 Overlay 网络？ Overlay 网络是一种 Docker 网络驱动，允许容器在不同主机间通信。它依赖分布式存储（如 Swarm、Etcd 或 Consul）来管理网络配置和路由。 Overlay 网络的核心特点跨主机通信：容器可以跨物理主…...

编程日记 2025/6/28 21:12:25

澎峰科技助力中国移动重磅发布智算“芯合”算力原生基础软件栈2.0

11月30日 ，由中国通信学会主办、中国移动研究院承办的2024中国信息通信大会“算力网络算网一体创新发展论坛 ”在成都召开。中国移动研究院携手澎峰科技等产业合作伙伴在本次论坛重磅发布了智算“芯合”算力原生基础软件栈2.0。芯片是智算生态的基石，基…...

编程日记 2025/6/28 20:44:27

电脑提示报错“Directx error”怎么解决？是什么原因导致的？游戏软件提示“Directx error”错误的解决方案

DirectX Error（DX错误）通常指的是在使用基于DirectX技术的应用程序（尤其是游戏）时遇到的问题。这个问题可能由多种因素导致，以下是一些可能的原因及相应的解决方案： 可能的原因 DirectX版本不匹配&#x…...

编程日记 2025/6/28 15:50:48

jmeter 压测常用静默参数解释应用

简介： JMeter静默压测（即无界面压测）是一种常用的性能测试方法，用于模拟多个用户同时访问系统并测量系统的响应时间和吞吐量等关键性能指标。在JMeter静默压测中，常用的压测参数及其解释如下： 一、基本…...

编程日记 2025/6/28 21:12:17

动态规划-----路径问题

动态规划-----路径问题下降最小路径和1：状态表示2：状态转移方程3 初始化4 填表顺序5 返回值6 代码实现总结： 下降最小路径和 1：状态表示假设：用dp[i][j]表示：到达[i,j]的最小路径 2：状态转…...

编程日记 2025/6/30 5:32:06

LeetCode 438.找到字符串中所有字母异位词

LeetCode 438.找到字符串中所有字母异位词思路🧐： 需要找到子串异位词，也就是只看该子串是否有相同字母而不管位置是否相同。分析题目发现只需要单调向前找异位词，则可以使用滑动窗口求解，注意这里每当左右边框长度大…...

编程日记 2025/6/28 21:01:09

[C++设计模式] 为什么需要设计模式？

文章目录什么是设计模式？为什么需要设计模式？GOF 设计模式再次理解面向对象软件设计固有的复杂性软件设计复杂性的根本原因如何解决复杂性？分解抽象结构化 VS 面向对象(封装)结构化设计代码示例：面向对象设计代码示例&#xff1…...

编程日记 2025/6/28 21:14:58

【ArkTS】使用AVRecorder录制音频 --内附录音机开发详细代码

系列文章目录【ArkTS】关于ForEach的第三个参数键值【ArkTS】“一篇带你读懂ForEach和LazyForEach” 【小白拓展】【ArkTS】“一篇带你掌握TaskPool与Worker两种多线程并发方案” 【ArkTS】一篇带你掌握“语音转文字技术” --内附详细代码【ArkTS】技能提高–“用户授权”…...

编程日记 2025/6/30 5:31:12

【知识科普】设计模式之-责任链模式

这里写自定义目录标题概述责任链模式的详细描述责任链模式的使用场景使用场景举例1. 审批流程示例：2. 过滤器链示例：3. 事件处理系统示例：4. 插件系统示例： Java代码示例及注释代码解释概述责任链模式的详细描述责任链模式…...

编程日记 2025/6/30 6:37:01

浏览器渲染原理

渲染原理第一步解析Html第二步样式计算第三步布局第四步分层第五步绘制第六步分块第七步光栅化第八步画常见面试题什么是回流reflow？什么是重绘repaint？ 当浏览器的网络线程收到HTML文档之后，会产生一个渲染任务并且会将其传递给渲染主线程的…...

编程日记 2025/6/28 21:13:54

顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测（Maltab）

顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测（Maltab） 目录顶刊算法 | 鱼鹰算法OOA-BiTCN-BiGRU-Attention多输入单输出回归预测（Maltab）效果一览基本介绍程序设计参考资料效果一览基本介绍 1.Matlab实…...

编程日记 2025/6/28 20:45:47

【机器学习】分类任务：二分类与多分类

二分类与多分类：概念与区别二分类和多分类是分类任务的两种类型，区分的核心在于目标变量（label）的类别数： 二分类：目标变量 y 只有两个类别，通常记为 y∈{0,1} 或 y∈{−1,1}。示例&#xff…...

编程日记 2025/6/28 20:56:20

速盾：高防 CDN 可以配置客户端请求超时配置？

在高防 CDN（Content Delivery Network，内容分发网络）的运行管理中，客户端请求超时配置是一项重要的功能设定，它对于优化网络资源分配、保障服务质量以及维护系统稳定性有着关键意义。一、客户端请求超时配置的概念 …...

编程日记 2025/6/28 20:44:33

字节青训Marscode——8：找出整形数组中超过一半的数

问题描述小R从班级中抽取了一些同学，每位同学都会给出一个数字。已知在这些数字中，某个数字的出现次数超过了数字总数的一半。现在需要你帮助小R找到这个数字。测试样例样例1： 输入：array [1, 3, 8, 2, 3, 1, 3, 3, 3] 输出…...

编程日记 2025/6/28 20:51:57

Fastapi + vue3 自动化测试平台---移动端App自动化篇

概述好久写文章了，专注于新框架，新UI界面的实践，废话不多说，开搞技术架构后端： Fastapi Airtest multiprocessing 前端： 基于 Vue3、Vite、TypeScript、Pinia、Pinia持久化插件、Unocss 和 Elemen…...

编程日记 2025/6/30 20:04:04

go并发设计模式runner模式

go并发设计模式runner模式真正运行的程序不可能是单线程运行的，go语言中最值得骄傲的就是CSP模型了，可以说go语言是CSP模型的实现。假设现在有一个程序需要实现，这个程序有以下要求： 程序可以在分配的时间内完成工作&#xff0…...

编程日记 2025/6/30 7:06:24

[TPAMI 2024]Vision-Language Models for Vision Tasks: A Survey

论文网址：Vision-Language Models for Vision Tasks: A Survey | IEEE Journals & Magazine | IEEE Xplore 论文Github页面：GitHub - jingyi0000/VLM_survey: Collection of AWESOME vision-language models for vision tasks 英文是纯手打的&…...

编程日记 2025/6/28 20:15:36

Qt—QLineEdit 使用总结

文章参考：Qt—QLineEdit 使用总结一、简述 QLineEdit是一个单行文本编辑控件。使用者可以通过很多函数，输入和编辑单行文本，比如撤销、恢复、剪切、粘贴以及拖放等。通过改变 QLineEdit 的 echoMode() ，可以设置其属性，比如以密码的形式输入。文本的长度可以由 m…...

编程日记 2025/7/1 12:41:16

Flutter 之 InheritedWidget

InheritedWidget 是 Flutter 框架中的一个重要类，用于在 Widget 树中共享数据。它是 Flutter 中数据传递和状态管理的基础之一。通过 InheritedWidget，你可以让子 Widget 在不需要显式传递数据的情况下，访问祖先 Widget 中的数据。这种机制对…...

编程日记 2025/6/28 21:00:03

#JAVA－常用API－爬虫

1.爬虫我们在正则表达式的讲解中可以使用字符串的方法materchs()来匹配，并且返回一个boolean值 String name "lshhhljh"; System.out.println(name.matches("lsh{3}\\s{3}")); //true现在我们将利用正则表达式来爬取本地或者网站上的文本内…...

编程日记 2025/6/28 20:53:40

Qt Serial Bus 前置介绍篇

文章目录 Qt Serial Bus 简介前言什么是 Qt Serial Bus？Qt Serial Bus 的核心功能支持的协议1. **CAN 总线**2. **Modbus**3. **自定义协议** 应用场景优势总结 Qt Serial Bus 简介前言 Qt Serial Bus 是 Qt 框架中的一个模块，用于与工业设备和嵌入式…...

编程日记 2025/6/28 21:12:57

JavaScript(一）

1.JavaScript 基本使用 2.JavaScript简单事件 3.JavaScript修改样式 4.JavaScript数据类型 JavaScript和Java有什么关系知识点一 JavaScript基本使用 JS写在哪还有一种写在中间的，也就是<head>里面 JS一些注意事项 JS修改元素内容 #JS获取对象<…...

编程日记 2025/6/28 20:56:05

Python实现网站资源批量下载【可转成exe程序运行】

Python实现网站资源批量下载【可转成exe程序运行】背景介绍解决方案转为exe可执行程序简单点说详细了解下声明背景介绍发现宣讲家网的PPT很好，作为学习资料使用很有价值，所以想下载网站的PPT课件到本地，但是由于网站限制，一…...

编程日记 2025/6/28 21:10:54

el-upload上传多个文件，一次请求，Django接收

1、:file-list"fileList" :on-change"handleChange" 将文件赋值到fileList 2、 :auto-upload"false" 手动触发上传写个按钮点击执行这个 this.$refs.upload.submit(); 3、自己写上传，不会再触发上传成功或失败回调 4、 request.FI…...

编程日记 2025/7/1 9:39:01

【错误记录】jupyter notebook打开后服务器错误Forbidden问题

如题，在Anaconda Prompt里输入jupyter notebook后可以打开浏览器，但打开具体项目后就会显示“服务器错误：Forbidden”，终端出现： tornado.web.HTTPError: HTTP 403: Forbidden 查看jupyter-server和jupyter notebook版…...

编程日记 2025/6/28 20:59:27

修改MVCActiveRecord支持匿名函数（用于动态决定数据库连接）

要修改 TMVCActiveRecordMiddleware 以直接接受一个匿名函数（用于动态决定数据库连接）以及一个配置文件名，你需要对构造函数进行一些调整。这可以通过重载构造函数以接收另一个参数——匿名函数来实现。构造函数修改步骤假设你的目标是允…...

编程日记 2025/6/28 20:58:20

SpringMVC（一）

ModelAndView ModelAndView 是 Spring MVC 框架中的一个类，用于在控制器中返回模型数据和视图信息。模型： 包含应用程序的数据，这些数据将被传递到视图层进行渲染。模型数据通常以键值对的形式存储在一个 map 中。视图： 指定要渲…...

编程日记 2025/7/1 7:35:29

nginx配置笔记

前言 nginx官方文档: https://nginx.org/en/docs/openresty官方文档: https://github.com/openresty/lua-nginx-module一、配置 1. 配置实例 1.1. 80端口转443 server {listen 80 default_server;listen [::]:80 default_server;rewrite ^ https://$http_host$request_uri?…...

编程日记 2025/7/1 1:08:43

解决idea使用maven打包时无法将本地lib库文件和resource目录中的资源文件打包进jar文件的问题！！！

一、问题复现 1）项目结构如下我们看到项目中手动添加了本地lib资源，同时bootspring的配置文件和mapper文件也放在了resouces目录中。 2）上述结构的项目在使用maven打包时，最终生成的jar文件中将不包含lib库文件，甚…...

编程日记 2025/6/28 20:44:40

html button 按钮单选且高亮

<DIV class"middle"> <div class"containerTarget"> <span class"hover-target1" οnclick"btn(1);">韵达 </span> <span class"hover-target2" οnclick"btn(2);">中通 </span…...

编程日记 2025/6/28 21:12:52

GitLab使用中遇到的一些问题-记录

错误内容一 Warning: Permanently added gitlab.com (ED25519) to the list of known hosts. gitgitlab.com: Permission denied (publickey). Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. …...

编程日记 2025/6/28 21:11:26

html部分

js部分

css部分

完整版代码如下：

相关文章：