原生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 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...
深入剖析AI大模型：大模型时代的 Prompt 工程全解析
今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义，在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容，其实不管是方块还是方块实体，都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器，用于动态创…...
在Ubuntu中设置开机自动运行（sudo）指令的指南
在Ubuntu系统中，有时需要在系统启动时自动执行某些命令，特别是需要 sudo权限的指令。为了实现这一功能，可以使用多种方法，包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法，并提供…...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
Mysql8 忘记密码重置，以及问题解决
1.使用免密登录 找到配置MySQL文件，我的文件路径是/etc/mysql/my.cnf，有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
如何更改默认 Crontab 编辑器 ？
在 Linux 领域中，crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用，用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益，允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...
详细解析)
Caliper 负载(Workload)详细解析
Caliper 负载(Workload)详细解析 负载(Workload)是 Caliper 性能测试的核心部分，它定义了测试期间要执行的具体合约调用行为和交易模式。下面我将全面深入地讲解负载的各个方面。 一、负载模块基本结构 一个典型的负载模块(如 workload.js)包含以下基本结构： use strict;/…...