原生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强…...
SpringBoot实现接口防抖的几种方案，杜绝重复提交
插： AI时代，程序员或多或少要了解些人工智能，前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家(前言 – 人工智能教程 ) 坚持不懈，越努力越幸运，大家…...
了解VS安全编译选项GS
缓冲区溢出攻击的基本原理就是溢出时覆盖了函数返回地址，之后就会去执行攻击者自己的函数； 针对缓冲区溢出时覆盖函数返回地址这一特征，微软在编译程序时使用了安全编译选项-GS； 目前版本的Visual Studio中默认启用了这个编译选项…...
python 垃圾回收机制
简介 在Python中，垃圾回收是自动管理内存的一个重要方面。Python使用了一种称为引用计数的策略来跟踪对象的引用数目。当对象的引用计数降为零时，Python解释器就会自动释放该对象所占用的内存空间。 除了引用计数之外，Python还使用了其他一…...
深度学习设计模式之组合模式
文章目录 前言一、介绍二、详细分析1.核心组成2.实现步骤3.代码示例4.优缺点优点缺点 5.使用场景 总结 前言 组合模式是将对象组合成树形结构来表现"整体/部分"层次结构，可以更好的实现管理操作。 一、介绍 组合设计模式又叫部分整体模式，将…...
C++ 网络编程
一、Reactor 网络编程模型 reactor 是一个事件处理模型。网络处理：因为用户层并不知道 IO 什么时候就绪，所以将对 IO 的处理转化为对事件的处理。网络模型构成： 非阻塞 IO：操作 IO，如果 IO 未就绪，IO 函数会立刻返回。IO 多路复用：检测多路 IO 是否就绪。工作流程： 注册…...
服务案例|网络攻击事件的排查与修复
LinkSLA智能运维管家V6.0版支持通过SNMP Trap对设备进行监控告警，Trap是一种主动推送网络设备事件或告警消息的方式，与SNMP轮询（polling）不同，具有以下几点优势： 1. 实时监控与快速响应 SNMP Trap能够实时…...
如何使用宝塔面板搭建Tipask问答社区网站并发布公网远程访问
文章目录 前言1.Tipask网站搭建1.1 Tipask网站下载和安装1.2 Tipask网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道（云端设置）2.3 Cpolar稳定隧道（本地设置） 3. 公网访问测试4.结语 前…...
Git学习和使用指南简单篇
天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。…...
HTTPS单双向认证流程详解与联想
HTTPS单向认证 HTTPS在单向认证传输的过程中会涉及到三个密钥： 服务端的公钥和私钥，用来进行非对称加密交换密钥 客户端生成的随机密钥，用来进行对称加密传输数据 认证过程 1.客户端向服务器发起HTTPS请求，连接到服务器的443端…...
防止浏览器缓存了静态的配置等文件(例如外部的config.js 等文件)
防止浏览器缓存了静态的配置文件 前言1、在script引入的时候添加随机数1.1、引入js文件1.2、引入css文件 2、通过html文件的<meta>设置防止缓存3、使用HTTP响应头： 前言 在实际开发中浏览器的缓存问题一直是一个很让人头疼的问题，尤其是我们打包时…...