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

原生js实现拖拽改变元素顺序

news 2026/4/2 10:56:19

代码展示如下：

<!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实现拖拽改变元素顺序

代码展示如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title>…...

编程日记 2024/5/29 15:14:20

以果决其行，只为文化的传承

从他们每一个人的身上&#xff0c;我们看到传神的东西&#xff0c;就是他们都能用结果&#xff0c;去指引自己前进的方向&#xff0c;这正是我要解读倪海厦老师的原因&#xff0c;看倪海厦2012年已经去世&#xff0c;到现在已经十几年时间了&#xff0c;但是我们看现在自学中医…...

编程日记 2024/5/29 15:13:18

Flutter 中的 SizedOverflowBox 小部件：全面指南

Flutter 中的 SizedOverflowBox 小部件&#xff1a;全面指南 在 Flutter 的布局世界中&#xff0c;SizedOverflowBox 是一个相对独特的小部件&#xff0c;它允许子组件溢出其父组件的界限&#xff0c;同时保持父组件的尺寸不变。这在某些特定的布局场景下非常有用&#xff0c;…...

编程日记 2024/5/29 15:12:17

图像视频智能抹除修复解决方案，适应性强，应用广泛

行车录制、现场拍摄等过程中&#xff0c;往往会出现一些难以避免的瑕疵——遮挡物、无关人员、甚至是意外的光线变化&#xff0c;这些都可能影响到视频与图像的质量&#xff0c;降低其观赏性和专业性。 美摄科技&#xff0c;作为行业领先的图像视频智能处理专家&#xff0c;深…...

编程日记 2024/5/29 15:11:16

20240521(代码整洁和测试入门学习)

测试: 1.测试工程师、测试工具开发工程师、自动化测试工程师。 python&#xff1a; 1、发展背景和优势&#xff1b; 2、开始多需的工具 interpreter(解释器) refactor(重构) 2、变量和注释的基础语法 3、输入输出 i 1 for i in range(1, 11): print(i, end ) 不换行打印…...

编程日记 2024/5/29 15:10:15

git中忽略文件的配置

git中忽略文件的配置 一、在项目根目录下创建.gitignore文件二、配置规则如果在配置之前已经提交过文件了&#xff0c;要删除提交过的&#xff0c;如何修改&#xff0c;参考下面的 一、在项目根目录下创建.gitignore文件 .DS_Store node_modules/ /dist# local env files .env…...

编程日记 2024/5/29 15:09:13

如何进行前端职业规划

目录 找准自身定位 未来发展方向 扬长避短很有效 你的出处并不能代表什么 将目标放长放远 职业发展中面临的选择 全栈 or 纯前端？ ToB or ToC 赚钱 or 个人成长？ 分析每个阶段的需求 为什么不可以一边赚钱一边做喜欢的事情呢 我们还没离开校园的时候，就已经知道要…...

编程日记 2024/5/29 15:07:11

GD32F103系列单片机片上FLASH和ARM介绍

本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 后续项目主要在下面该专栏中发布&#xff1a; 手把手教你嵌入式国产化_不及你的温柔的博客-CSDN博客 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转&#xff1a; 手把手教你嵌入式国产化-实战项目-无刷电机驱动&am…...

编程日记 2024/5/29 15:06:09

Ansible自动化运维中的Setup收集模块应用详解

作者主页&#xff1a;点击&#xff01; Ansible专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年5月22日13点14分 &#x1f4af;趣站推荐&#x1f4af; 前些天发现了一个巨牛的&#x1f916;人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xf…...

编程日记 2024/5/29 15:04:07

再次学习History.scrollRestoration

再次学习History.scrollRestoration 之前在react.dev的源代码中了解到了这个HIstory的属性&#xff0c;当时写了一篇笔记来记录我对它的理解&#xff0c;现在看来还是一知半解。所以今天打算重新学习一下这个属性&#xff0c;主要从属性以及所属对象的介绍、使用方法&#xff0…...

编程日记 2024/5/29 15:02:05

python PyQt5 数字时钟程序

效果图&#xff1a; 概述 本文档将指导您如何使用Python的PyQt5库创建一个简单的时钟程序。该程序将显示当前时间&#xff0c;并具有以下特性&#xff1a; 始终在最前台显示。窗口可拖动。鼠标右键点击窗口可弹出退出菜单。时间标签具有红色渐变效果。窗口初始化时出现在屏幕…...

编程日记 2024/5/29 15:01:04

骨传导耳机哪个品牌值得入手？精选五大不容错过的王者品牌推荐！

尽管骨传导耳机作为新型蓝牙耳机问世不久&#xff0c;但凭借其独特的传音方式和舒适的佩戴体验&#xff0c;已经迅速在市场上崭露头角&#xff0c;赢得了广大音乐爱好者和运动达人的青睐。然而&#xff0c;随着骨传导耳机热度增高&#xff0c;市场上开始出现一些品质参差不齐的…...

编程日记 2024/5/29 15:00:02

Vue.js｜项目安装

根据Vue脚手架创建出来的项目目录&#xff1a; 运行项目&#xff1a; 控制台中输入下面的命令&#xff1a; npm run serve 修改vue项目运行端口&#xff1a; 前往vue.config.js中添加下面的代码&#xff1a; devServer: {port: 7000} 接着前往控制台输入Ctrlc关闭项目&…...

编程日记 2024/5/29 14:59:01

多线程新手村4--定时器

定时器是日常开发中很常见的组件&#xff0c;定时器大家可能不知道是干什么的&#xff0c;但是定时炸弹肯定都听过&#xff0c;定个时间&#xff0c;过一段时间后bomb&#xff01;&#xff01;&#xff01;爆炸 定时器的逻辑和这个一样&#xff0c;约定一个时间&#xff0c;这…...

编程日记 2024/5/29 14:58:00

如何衡量安全阀检测的价格与价值？一文揭晓答案

安全阀作为工业设备中的重要组件&#xff0c;其性能的稳定性和可靠性直接影响着整个系统的安全运行。因此&#xff0c;对安全阀进行定期检测和维护显得尤为重要。 那么&#xff0c;安全阀检测一个需要多少钱呢&#xff1f; 在这篇文章中&#xff0c;佰德将从检测费用构成、市…...

编程日记 2024/5/29 14:55:58

Sectigo证书介绍以及申请流程

Sectigo (原Comodo CA)是全球SSL证书市场占有率最高的CA公司&#xff0c;目前将近40%的SSL证书用户选择了Sectigo。由于其产品安全&#xff0c;价格低&#xff0c;受到大量站长的信任和欢迎。Sectigo旗下的SSL证书品牌包括Sectigo, Positive SSL, Sectigo Enterprise等。 品牌…...

编程日记 2024/5/29 14:54:57

网络安全-钓鱼篇-利用cs进行钓鱼

一、环境 自行搭建&#xff0c;kill&#xff0c;Windows10&#xff0c;cs 二、原理 如图所示 三、钓鱼演示 首先第一步&#xff1a;打开System Profiler-分析器功能 选择克隆www.baidu.com页面做钓鱼 之后我们通过包装域名&#xff0c;各种手段让攻击对象访问&#xff1a;h…...

编程日记 2024/5/29 14:52:54

机器学习-6-对随机梯度下降算法SGD的理解

参考一文带您了解随机梯度下降(Stochastic Gradient Descent):python代码示例 参考sklearn-SGDClassifier 1 梯度下降 在机器学习领域，梯度下降扮演着至关重要的角色。梯度下降是一种优化算法，通过迭代沿着由梯度定义的最陡下降方向，以最小化函数。类似于图中的场景，可以…...

编程日记 2024/5/29 14:51:53

windows 11 精简版下载

Optimum 11 24H2 家庭版和专业版版本在性能、响应能力和资源使用方面相同&#xff0c;因此请下载并安装适合您笔记本电脑的正确版本或在您的 PC 上获得终极 Windows 11 24H2 体验的许可证&#xff01; • 如果您熟悉我们的 22H2 和 23H2 Optimum 11 版本&#xff0c;此版本将…...

编程日记 2024/5/29 14:47:49

rpm与yum扩展、命令

目录 系统安装软件方式 1、rpm方式 命令 yum方式 安装 更新和升级 查找与显示 删除程序 清除缓存 仅下载 系统安装软件方式 1、rpm方式 优点&#xff1a;无需网络安装软件 缺点&#xff1a;无法解决软件依赖 命令 rpm -ivh 安装 --nodeps忽略依赖关系 --force强…...

编程日记 2024/5/29 14:46:47

Fay-UE5数字人系统架构深度解析：基于Unreal Engine 5的实时交互虚拟人技术实现

Fay-UE5数字人系统架构深度解析&#xff1a;基于Unreal Engine 5的实时交互虚拟人技术实现 【免费下载链接】fay-ue5 项目地址: https://gitcode.com/gh_mirrors/fa/fay-ue5 Fay-UE5是一个基于Unreal Engine 5引擎构建的高性能数字人解决方案&#xff0c;通过深度集成F…...

编程新知 2026/4/2 10:30:07

5分钟完成Axure RP中文汉化：小白也能轻松上手的终极教程

5分钟完成Axure RP中文汉化&#xff1a;小白也能轻松上手的终极教程 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包。支持 Axure 11、10、9。不定期更新。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在为Axure…...

编程新知 2026/4/2 10:28:04

用STM32CubeMX和TMC260驱动步进电机，这份PWM频率配置指南帮你避开新手常见坑

STM32CubeMX与TMC260步进电机驱动实战&#xff1a;PWM频率配置的黄金法则 第一次用STM32CubeMX配置TMC260驱动步进电机时&#xff0c;我盯着屏幕上那一堆定时器参数发愣——Prescaler、Period、Counter Mode...这些看似简单的数字背后&#xff0c;藏着让电机平稳运转或是疯狂抖…...

编程新知 2026/4/2 9:59:42

从BGA封装到Xtacking架构：图解NAND堆叠技术如何影响SSD性能

从BGA封装到Xtacking架构&#xff1a;NAND堆叠技术如何重塑SSD性能格局 当一块企业级SSD的读写速度突破7GB/s时&#xff0c;工程师们发现传统的NAND封装技术正在成为性能提升的瓶颈。在PCIe 5.0时代&#xff0c;信号传输速率需要达到2400MT/s才能充分发挥带宽潜力&#xff0c;而…...

编程新知 2026/4/2 9:08:43

[RAG在LangChain中的实现-07]利用重排序选择相关性最高的检索内容构建上下文

重排序&#xff08;Re-ranking&#xff09;是一种关键的RAG优化技术。它通过在“初始检索”与“最终生成”之间&#xff0c;通过对初步检索出的文档进行二次评估&#xff0c;筛选出与用户查询语义最相关的结果&#xff0c;从而提高生成内容的准确性。在典型的检索流程中&#x…...

编程新知 2026/4/2 8:52:23

基于凌科芯安加密芯片智能门锁解决方案

随着物联网产业的快速发展&#xff0c;智能网络设备对信息安全的需求与依赖日益增强。在万物互联的背景下&#xff0c;电子锁作为典型的安全防范产品&#xff0c;在重点场所安防与居民居家安全保障中发挥着关键作用。其中&#xff0c;智能门锁凭借密码、指纹、人脸识别、手机远…...

编程新知 2026/4/2 8:09:52

5分钟快速掌握Bypass Paywalls Clean：终极内容解锁工具完整指南

5分钟快速掌握Bypass Paywalls Clean&#xff1a;终极内容解锁工具完整指南 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 你是否经常遇到想阅读优质文章却被付费墙阻挡的烦恼&#…...

编程新知 2026/4/2 7:57:33

Swift-All镜像推荐：免配置快速部署，新手也能轻松上手

Swift-All镜像推荐&#xff1a;免配置快速部署&#xff0c;新手也能轻松上手 想体验大模型的强大能力&#xff0c;却被复杂的安装、环境配置和依赖问题搞得头大&#xff1f;今天&#xff0c;我为你介绍一个能彻底解决这些烦恼的“神器”——Swift-All镜像。它就像一个为你量身…...

编程新知 2026/4/2 7:25:09

千问3.5-9B模型切换指南：OpenClaw多模型动态调用

千问3.5-9B模型切换指南&#xff1a;OpenClaw多模型动态调用 1. 为什么需要多模型动态调用 上周我尝试用OpenClaw自动整理电脑里积压的300多份PDF文档时&#xff0c;遇到了一个有趣的现象&#xff1a;处理简单文件重命名任务时&#xff0c;轻量级模型响应飞快&#xff1b;但遇…...

编程新知 2026/4/2 6:50:40

intv_ai_mk11一文详解：7B参数轻量级开源对话模型在中小团队中的降本增效实践

intv_ai_mk11一文详解&#xff1a;7B参数轻量级开源对话模型在中小团队中的降本增效实践 1. 轻量级AI对话助手的价值定位 在中小团队的实际运营中&#xff0c;专业AI助手的引入往往面临两大难题&#xff1a;高昂的部署成本和复杂的技术门槛。intv_ai_mk11作为7B参数的轻量级开…...

编程新知 2026/4/2 6:40:39