原生js实现拖拽改变元素顺序
代码展示如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{border: 10px solid #000;}.item{margin: 10px 10px 0 10px;background-color: aquamarine;padding: 10px;text-align: center;}.item:nth-last-child(1){margin-bottom: 10px;}</style>
</head>
<body><div class="box"></div><h1></h1><script>class Demo {constructor(data,box,showResBox){this.data = datathis.box = boxthis.showResBox = showResBoxthis.init(data,box,showResBox)}init (data,box) {let fragment = document.createDocumentFragment();for (let i = 0; i < data.length; i++) {let div = document.createElement("div")div.setAttribute("class","item")div.setAttribute("draggable",true)div.innerText = data[i]fragment.appendChild(div)}box.appendChild(fragment)this.showResBox.innerHTML = `最终的结果：${data.join('-')}`this.handledragstart(box)this.handledragover(box)this.handledragend(box)fragment = null}changeElemPosition(source,target,parentNode) {let sourceNext = source.nextSibling;let targetNext = target.nextSibling;parentNode.insertBefore(target,sourceNext)parentNode.insertBefore(source,targetNext)}eventFn(e) {let that = thisswitch (e.type) {case 'dragstart':if (e.target.className=="item") {that.sourceElem = e.target}returncase 'dragover':e.preventDefault()if (e.target.className=="item") {that.targetElem = e.target}returncase 'dragend':let temp = []that.changeElemPosition(that.sourceElem,that.targetElem,e.currentTarget)Array.from(e.currentTarget.children).forEach(elem=>{temp.push(Number(elem.innerText)) })that.data = [...temp]that.showResBox.innerHTML = `最终的结果：${that.data.join('-')}`that.removeEventAndObj(that.eventFn)return}}handledragstart (box) {box.addEventListener('dragstart',(e)=>{this.eventFn(e)})}handledragover (box) {box.addEventListener('dragover',(e)=>{this.eventFn(e)})}handledragend (box) {box.addEventListener('dragend',(e)=>{this.eventFn(e)})}removeEventAndObj(eventFn) {this.targetElem = nullthis.sourceElem = nullthis.box.removeEventListener('dragstart',eventFn)this.box.removeEventListener('dragover',eventFn)this.box.removeEventListener('dragend',eventFn)}}let d = new Demo([1,2,3,4,6],document.querySelector('.box'),document.querySelector('h1'))</script>
</body>
</html>
效果展示如下：
知识点须知：【详情请参考：insertBefore】
Node.insertBefore(newNode,referenceNode)
如果给定的节点（newNode）是对文档中现有节点的引用，insertBefore方法会将其从当前位置移动到新位置（将节点附加到其他节点之前的操作，不需要从其父节点删除该节点）。
用法：
parentNode.insertBefore(newNode, referenceNode);
需要注意的是：html5 draggable属性在移动端不生效
相关文章：
原生js实现拖拽改变元素顺序
代码展示如下： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…...
以果决其行，只为文化的传承
从他们每一个人的身上，我们看到传神的东西，就是他们都能用结果，去指引自己前进的方向，这正是我要解读倪海厦老师的原因，看倪海厦2012年已经去世，到现在已经十几年时间了，但是我们看现在自学中医…...
Flutter 中的 SizedOverflowBox 小部件：全面指南
Flutter 中的 SizedOverflowBox 小部件：全面指南 在 Flutter 的布局世界中，SizedOverflowBox 是一个相对独特的小部件，它允许子组件溢出其父组件的界限，同时保持父组件的尺寸不变。这在某些特定的布局场景下非常有用，…...
图像视频智能抹除修复解决方案，适应性强，应用广泛
行车录制、现场拍摄等过程中，往往会出现一些难以避免的瑕疵——遮挡物、无关人员、甚至是意外的光线变化，这些都可能影响到视频与图像的质量，降低其观赏性和专业性。 美摄科技，作为行业领先的图像视频智能处理专家，深…...
)
20240521(代码整洁和测试入门学习)
测试: 1.测试工程师、测试工具开发工程师、自动化测试工程师。 python： 1、发展背景和优势； 2、开始多需的工具 interpreter(解释器) refactor(重构) 2、变量和注释的基础语法 3、输入输出 i 1 for i in range(1, 11): print(i, end ) 不换行打印…...
git中忽略文件的配置
git中忽略文件的配置 一、在项目根目录下创建.gitignore文件二、配置规则如果在配置之前已经提交过文件了，要删除提交过的，如何修改，参考下面的 一、在项目根目录下创建.gitignore文件 .DS_Store node_modules/ /dist# local env files .env…...
如何进行前端职业规划
目录 找准自身定位 未来发展方向 扬长避短很有效 你的出处并不能代表什么 将目标放长放远 职业发展中面临的选择 全栈 or 纯前端？ ToB or ToC 赚钱 or 个人成长？ 分析每个阶段的需求 为什么不可以一边赚钱一边做喜欢的事情呢 我们还没离开校园的时候，就已经知道要…...
GD32F103系列单片机片上FLASH和ARM介绍
本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 后续项目主要在下面该专栏中发布： 手把手教你嵌入式国产化_不及你的温柔的博客-CSDN博客 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转： 手把手教你嵌入式国产化-实战项目-无刷电机驱动&am…...
Ansible自动化运维中的Setup收集模块应用详解
作者主页：点击！ Ansible专栏：点击！ 创作时间：2024年5月22日13点14分 💯趣站推荐💯 前些天发现了一个巨牛的🤖人工智能学习网站，通俗易懂，风趣幽默…...
再次学习History.scrollRestoration
再次学习History.scrollRestoration 之前在react.dev的源代码中了解到了这个HIstory的属性，当时写了一篇笔记来记录我对它的理解，现在看来还是一知半解。所以今天打算重新学习一下这个属性，主要从属性以及所属对象的介绍、使用方法࿰…...
python PyQt5 数字时钟程序
效果图： 概述 本文档将指导您如何使用Python的PyQt5库创建一个简单的时钟程序。该程序将显示当前时间，并具有以下特性： 始终在最前台显示。窗口可拖动。鼠标右键点击窗口可弹出退出菜单。时间标签具有红色渐变效果。窗口初始化时出现在屏幕…...
骨传导耳机哪个品牌值得入手？精选五大不容错过的王者品牌推荐！
尽管骨传导耳机作为新型蓝牙耳机问世不久，但凭借其独特的传音方式和舒适的佩戴体验，已经迅速在市场上崭露头角，赢得了广大音乐爱好者和运动达人的青睐。然而，随着骨传导耳机热度增高，市场上开始出现一些品质参差不齐的…...
Vue.js｜项目安装
根据Vue脚手架创建出来的项目目录： 运行项目： 控制台中输入下面的命令： npm run serve 修改vue项目运行端口： 前往vue.config.js中添加下面的代码： devServer: {port: 7000} 接着前往控制台输入Ctrlc关闭项目&…...
多线程新手村4--定时器
定时器是日常开发中很常见的组件，定时器大家可能不知道是干什么的，但是定时炸弹肯定都听过，定个时间，过一段时间后bomb！！！爆炸 定时器的逻辑和这个一样，约定一个时间，这…...
如何衡量安全阀检测的价格与价值？一文揭晓答案
安全阀作为工业设备中的重要组件，其性能的稳定性和可靠性直接影响着整个系统的安全运行。因此，对安全阀进行定期检测和维护显得尤为重要。 那么，安全阀检测一个需要多少钱呢？ 在这篇文章中，佰德将从检测费用构成、市…...
Sectigo证书介绍以及申请流程
Sectigo (原Comodo CA)是全球SSL证书市场占有率最高的CA公司，目前将近40%的SSL证书用户选择了Sectigo。由于其产品安全，价格低，受到大量站长的信任和欢迎。Sectigo旗下的SSL证书品牌包括Sectigo, Positive SSL, Sectigo Enterprise等。 品牌…...
网络安全-钓鱼篇-利用cs进行钓鱼
一、环境 自行搭建，kill，Windows10，cs 二、原理 如图所示 三、钓鱼演示 首先第一步：打开System Profiler-分析器功能 选择克隆www.baidu.com页面做钓鱼 之后我们通过包装域名，各种手段让攻击对象访问：h…...
机器学习-6-对随机梯度下降算法SGD的理解
参考一文带您了解随机梯度下降(Stochastic Gradient Descent):python代码示例 参考sklearn-SGDClassifier 1 梯度下降 在机器学习领域，梯度下降扮演着至关重要的角色。梯度下降是一种优化算法，通过迭代沿着由梯度定义的最陡下降方向，以最小化函数。类似于图中的场景，可以…...
windows 11 精简版下载
Optimum 11 24H2 家庭版和专业版版本在性能、响应能力和资源使用方面相同，因此请下载并安装适合您笔记本电脑的正确版本或在您的 PC 上获得终极 Windows 11 24H2 体验的许可证！ • 如果您熟悉我们的 22H2 和 23H2 Optimum 11 版本，此版本将…...
rpm与yum扩展、命令
目录 系统安装软件方式 1、rpm方式 命令 yum方式 安装 更新和升级 查找与显示 删除程序 清除缓存 仅下载 系统安装软件方式 1、rpm方式 优点：无需网络安装软件 缺点：无法解决软件依赖 命令 rpm -ivh 安装 --nodeps忽略依赖关系 --force强…...
【Python】 -- 趣味代码 - 小恐龙游戏
文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
基于大模型的 UI 自动化系统
基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
CocosCreator 之 JavaScript/TypeScript和Java的相互交互
引擎版本： 3.8.1 语言： JavaScript/TypeScript、C、Java 环境：Window 参考：Java原生反射机制 您好，我是鹤九日！ 回顾 在上篇文章中：CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
HTML前端开发：JavaScript 常用事件详解
作为前端开发的核心，JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例： 1. onclick - 点击事件 当元素被单击时触发（左键点击） button.onclick function() {alert("按钮被点击了！&…...
Caliper 配置文件解析：config.yaml
Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...
Redis的发布订阅模式与专业的 MQ（如 Kafka, RabbitMQ）相比，优缺点是什么？适用于哪些场景？
Redis 的发布订阅（Pub/Sub）模式与专业的 MQ（Message Queue）如 Kafka、RabbitMQ 进行比较，核心的权衡点在于：简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板（STM32F103RBT6）通过I2C驱动ICM20948九轴传感器，实现姿态解算，并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化，适合嵌入式及物联网开发者。在基础驱动上新增…...