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

HTML拖拽功能（纯html5+JS实现）

news 来源：原创 2025/6/12 19:22:28

1、HTML拖拽--单元行拖动

<!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>.list {padding: 0;margin: 0;padding-top: 10px;width: 500px;border: 1px solid;display: flex;flex-flow: column;align-items: center;justify-content: center;margin: 0 auto;list-style: none;/* 去除ul小点 */}.list-item {user-select: none;width: 400px;height: 45px;line-height: 45px;text-align: center;border: 1px solid;margin-bottom: 10px;/* 渐变背景 */background: linear-gradient(to right, #e9afaa, #51b9ff);cursor: move;color: #fff;border-radius: 5px;}/*移动中样式*/.list-item.moving {background: transparent;color: transparent;border: 1px dashed #ccc;}</style>
</head><body><ul class="list"><li draggable="true" class="list-item">1</li><li draggable="true" class="list-item">2</li><li draggable="true" class="list-item">3</li><li draggable="true" class="list-item">4</li><li draggable="true" class="list-item">5</li><li draggable="true" class="list-item">6</li><li draggable="true" class="list-item">7</li><li draggable="true" class="list-item">8</li></ul><script>/*(1)获取父元素dom*/const list = document.querySelector('.list');let sourceNode; //当前在拖动的节点/*拖动开始-- 当前选中节点增加样式*/list.ondragstart = e => {setTimeout(() => {e.target.classList.add('moving')//给当前选中增加样式}, 0);sourceNode = e.target e.dataTransfer.effectAllowed = 'move';//允许移动操作}/*拖动在目标区域移动*/list.ondragover = e => {e.preventDefault() // 允许放置}/*拖动进入目标区域 */list.ondragenter = e => {e.preventDefault(); // 允许放置if (e.target === list || e.target === sourceNode) {return}const children = Array.from(list.children) //创建新数组进行操作const sourceIndex = children.indexOf(sourceNode) //获取拖动开始下标const targetIndex = children.indexOf(e.target)   //获取当前下标/*位置挪动*/if (sourceIndex < targetIndex) {list.insertBefore(sourceNode, e.target.nextElementSibling)} else {list.insertBefore(sourceNode, e.target)}}/*拖动结束-- 重置拖动样式状态*/list.ondragend = e => {e.target.classList.remove('moving')}</script>
</body></html>

2、HTML拖拽--九宫格拖动

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>html_拖动-九宫格</title><style>.list {padding: 0;margin: 0;padding-top: 10px;width: 660px;border: 1px solid;display: flex;flex-wrap: wrap;margin: 0 auto;list-style: none;/* 去除ul小点 */}.list-item {box-sizing: border-box;cursor: move;display: inline-block;user-select: none;width: 200px;height: 200px;margin-bottom: 10px;/* 渐变背景 */background: linear-gradient(to right, #e9afaa, #51b9ff);border: 1px solid;color: #fff;border-radius: 10px;margin:10px 10px;display: flex;align-items: center;justify-content: center;}/*移动中样式*/.list-item.moving {opacity: 0.5;/* background: transparent; *//* color: transparent; */border: 1px dashed #ccc;}</style>
</head><body><ul class="list"><li draggable="true" class="list-item">1</li><li draggable="true" class="list-item">2</li><li draggable="true" class="list-item">3</li><li draggable="true" class="list-item">4</li><li draggable="true" class="list-item">5</li><li draggable="true" class="list-item">6</li><li draggable="true" class="list-item">7</li><li draggable="true" class="list-item">8</li><li draggable="true" class="list-item">9</li></ul><script>/*(1)获取父元素dom*/const list = document.querySelector('.list');let sourceNode; //当前在拖动的节点/*拖动开始-- 当前选中节点增加样式*/list.ondragstart = e => {setTimeout(() => {e.target.classList.add('moving')//给当前选中增加样式}, 0);sourceNode = e.targete.dataTransfer.effectAllowed = 'move';//允许移动操作}/*拖动在目标区域移动*/list.ondragover = e => {e.preventDefault() // 允许放置}/*拖动进入目标区域 */list.ondragenter = e => {e.preventDefault(); // 允许放置if (e.target === list || e.target === sourceNode) {return}const children = Array.from(list.children) //创建新数组进行操作const sourceIndex = children.indexOf(sourceNode) //获取拖动开始下标const targetIndex = children.indexOf(e.target)   //获取当前下标/*位置挪动*/if (sourceIndex < targetIndex) {list.insertBefore(sourceNode, e.target.nextElementSibling)} else {list.insertBefore(sourceNode, e.target)}}/*拖动结束-- 重置拖动样式状态*/list.ondragend = e => {e.target.classList.remove('moving')}</script>
</body></html>

3、html拖拽事件

在HTML和JavaScript中，拖放操作涉及多个事件，这些事件可以让你在不同的阶段处理拖放行为。ondragenter 是其中一个事件，它在拖动元素进入目标元素的边界时触发。以下是拖放操作中常用的事件及其用途：

`1、dragstart`

触发时机：拖动操作开始时触发。
用途：可以用来设置拖动数据和拖动效果。
示例：

javascriptelement.ondragstart = function(event) {event.dataTransfer.setData("text/plain", event.target.id);
};

2. `drag`

触发时机：拖动过程中不断触发。
用途：可以用来提供拖动过程中的反馈，例如更新拖动图标或状态。
示例：

javascriptelement.ondrag = function(event) {// 更新拖动状态
};

3. `dragenter`

触发时机：拖动元素进入目标元素的边界时触发。
用途：可以用来设置目标元素的样式，表示可以放置。
示例：

javascripttargetElement.ondragenter = function(event) {event.target.style.border = "2px dashed #000";
};

4. `dragover`

触发时机：拖动元素在目标元素上移动时触发。
用途：可以用来设置放置效果，例如允许或禁止放置。
示例：

javascripttargetElement.ondragover = function(event) {event.preventDefault(); // 允许放置
};

5. `dragleave`

触发时机：拖动元素离开目标元素的边界时触发。
用途：可以用来重置目标元素的样式。
示例：

javascripttargetElement.ondragleave = function(event) {event.target.style.border = "none";
};

6. `drop`

触发时机：在目标元素上释放拖动元素时触发。
用途：可以用来处理放置操作，例如获取拖动数据并进行处理。
示例：

javascripttargetElement.ondrop = function(event) {event.preventDefault();const data = event.dataTransfer.getData("text/plain");const draggedElement = document.getElementById(data);// 处理放置操作
};

7. `dragend`

触发时机：拖动操作结束时触发，无论是在目标元素上释放还是取消拖动。
用途：可以用来重置拖动状态和样式。
示例：

javascriptelement.ondragend = function(event) {// 重置拖动状态
};

HTML拖拽功能（纯html5+JS实现）

1、HTML拖拽--单元行拖动 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><…...

编程日记 2025/6/4 6:40:16

w158医院资源管理系统的设计与实现

🙊作者简介：多年一线开发工作经验，原创团队，分享技术代码帮助学生学习，独立完成自己的网站项目。代码可以查看文章末尾⬇️联系方式获取，记得注明来意哦~🌹赠送计算机毕业设计600个选题excel文…...

编程日记 2025/6/4 6:40:48

【计算机网络】lab3 802.11 （无线网络帧）

🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀计算机网络_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光目录 1. 前言 2.…...

编程日记 2025/6/2 22:48:31

linux进程

课本概念：程序的⼀个执行实例，正在执行的程序等内核观点：担当分配系统资源（CPU时间，内存）的实体。进程信息被放在一个叫做进程控制块的数据结构中，可以理解为进程属性的集合.课本上称之为PCB&…...

编程日记 2025/6/1 8:19:05

pytest-allure框架简单封装----测试报告

安装allure-commandline---可以支持allure命令把对应的压缩包解压后,把xxx/bin配置到环境变量的path去可以输入allure -version检查版本 pip install allure-pytest2.11.1 生成测试报告 import pytest pytest_args ["-s","-v","--capturesys…...

编程日记 2025/6/1 10:23:36

【2025最新计算机毕业设计】基于SpringBoot+Vue奶茶点单系统（高质量源码，提供文档，免费部署到本地）

作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…...

编程日记 2025/6/3 22:13:01

HTML中最基本的东西

本文内容的标签，将是看懂HTML的最基本之基本 ，是跟您在写文章时候一样内容。一般想掌握极其容易，但是也要懂得如何使用，过目不忘，为手熟尔。才是我们学习的最终目的。其实边看边敲都行，或者是边看边复制粘贴…...

编程日记 2025/6/4 5:08:59

Open FPV VTX开源之ardupilot配置 1. 源由2. 配置3. 总结4. 参考资料5. 补充5.1 飞控固件版本5.2 配置Ardupilot的BF OSD5.3 OSD偏左问题 1. 源由飞控嵌入式OSD - ardupilot配置使用ardupliot配套OSD图片。 Choose correct font depending on Flight Controller SW. ──>…...

编程日记 2025/6/2 22:02:56

基于OQuPy的量子编程实例探究：理论、实践与展望

基于OQuPy的量子编程探究：理论、分析与实践一、引言 1.1 研究背景与意义近年来，量子计算作为一种革命性的计算范式，在科学界与产业界引发了广泛关注。它依托量子力学原理，运用量子比特（qubit）进行信息处理，与传统计算相比，具备并行处理、指数级加速等显著优势，为解…...

编程日记 2025/6/2 21:34:44

深入理解 ECMAScript 2024 新特性：正则表达式 /v 标志

ECMAScript 2024 （ES15）标准引入了新的正则表达式标志 /v，这一新增功能不仅优化了多行匹配的处理，还增加了对特殊字符匹配的支持。这一变革对于需要处理复杂文本数据的应用场景尤为重要，比如日志分析、代码审核等。接下…...

编程日记 2025/6/2 21:55:25

iOS 逆向学习 - Inter-Process Communication：进程间通信

iOS 逆向学习 - Inter-Process Communication：进程间通信一、进程间通信概要二、iOS 进程间通信机制详解1. URL Schemes2. Pasteboard3. App Groups 和 Shared Containers4. XPC Services 三、不同进程间通信机制的差异四、总结一、进程间通信概要进程间通信&am…...

编程日记 2025/6/2 1:08:59

Prompt工程框架介绍与场景选择

文章目录 Prompt工程框架介绍1. CREATE框架2. RACE框架3. RISE框架4. ROSES框架5. E.R.A框架6. SAGE框架7. CARE框架8. PEAR框架9. TIER框架10. LEAP框架11. DEEP框架12. WISE框架13. FOCUS框架14. CLEAR框架15. SMART框架16. CLEAR框架17. LEAN框架18. BRIEF框架19. FAST框架2…...

编程日记 2025/6/2 21:55:09

信号量机制之苹果-橘子问题

桌上有一空盘，允许存放一种水果。爸爸可向盘中放苹果，也可向盘中放橘子，儿子专等吃盘中的橘子，女儿专等吃盘中的苹果。规定当盘空时一次只能放一个水果供吃者取用。要求：请用信号量机制实现爸爸、儿子、女儿三个并发…...

编程日记 2025/6/1 8:09:21

工业路由器和工业交换机，如何打造高效稳定的工业网络？

工业路由器和工业交换机各有千秋，但如何将它们完美结合，构建稳定高效的工业网络？答案就在这里！ 工业物联网（IIoT）是高效、稳定的工业网络成为智慧工厂、工业自动化和远程监控等场景的基础支撑。工业路由器…...

编程日记 2025/6/1 17:16:33

【IDEA 2024】学习笔记--文件选项卡

在我们项目的开发过程中，由于项目涉及的类过多，以至于我们会打开很多的窗口。使用IDEA默认的配置，个人觉得十分不便。目录一、设置多个文件选项卡按照文件字母顺序排列二、设置多个文件选项卡分行显示一、设置多个文件选项卡按照文件字…...

编程日记 2025/5/30 10:16:00

LabVIEW光流算法的应用

该VI展示了如何使用NI Vision Development Module中的光流算法来计算图像序列中像素的运动矢量。通过该方法，可以实现目标跟踪、运动检测等功能，适用于视频处理、机器人视觉和监控领域。程序采用模块化设计，包含图像输入、算法处理、结果展示…...

编程日记 2025/6/3 7:28:29

WPF 如何添加系统托盘

1.使用Nuget 添加 handycontrol cs xmlns:hc"https://handyorg.github.io/handycontrol" 2.窗体添加控件cs <hc:NotifyIcon x:Name"NotifyIconContextContent" Text"软件名称" ContextMenu"{StaticResource ContextMenu}" Click&…...

编程日记 2025/6/3 3:59:45

小游戏前端地区获取

目前前端获取除了太平洋，没有其它的了。 //在JS中都是使用的UTF-8，然而requst请求后显示GBK却是乱码，对传入的GBK字符串，要用数据流接收，responseType: "arraybuffer" tt.request({url: "https://whoi…...

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

美摄科技为企业打造专属PC端视频编辑私有化部署方案

美摄科技，作为视频编辑技术的先行者，凭借其在多媒体处理领域的深厚积累，为企业量身打造了PC端视频编辑私有化部署解决方案，旨在帮助企业构建高效、安全、定制化的视频创作平台，赋能企业内容创新，提升品牌影…...

编程日记 2025/6/1 16:19:36

【0x005B】HCI_Write_Default_Erroneous_Data_Reporting命令详解

目录一、命令概述二、命令格式及参数 2.1. HCI_Write_Default_Erroneous_Data_Reporting命令格式 2.2. Erroneous_Data_Reporting 三、生成事件及参数 3.1. HCI_Command_Complete事件 3.2. 状态码（Status）四、命令执行流程 4.1. 命令发起阶段（主机端） 4.2. 命…...

编程日记 2025/6/4 0:12:56

1月13日学习

[HITCON 2017]SSRFme 直接给了源代码，题目名称还是ssrf，那么该题大概率就是SSRF的漏洞，进行代码审计。 <?php// 检查是否存在 HTTP_X_FORWARDED_FOR 头，如果存在，则将其拆分为数组，并将第一个 IP 地址…...

编程日记 2025/6/4 4:53:14

数据平台浅理解

定义数据平台架构是指用于收集、存储、处理和分析数据的一系列组件、技术和流程的整体架构设计。它就像是一个复杂的数据生态系统的蓝图，旨在高效地管理数据从产生源头到产生价值的整个生命周期。主要层次数据源层这是数据的起点，包含各种类型的数据…...

编程日记 2025/6/3 21:53:02

高通，联发科（MTK）等手机平台调优汇总

一、常见手机型号介绍： ISP除了用在安防行业，还有手机市场，以及目前新型的A/VR眼睛，机器3D视觉机器人，医疗内窥镜这些行业。下面是一些最近几年发布的,,,旗舰SOC型号： 1.联发科：天玑92…...

编程日记 2025/6/3 21:52:46

win10 Outlook(new) 企业邮箱登录登录失败。请在几分钟后重试。

windows系统经常弹出使用Outlook(new），自动切过去。但是登录企业的内网邮箱，折腾了好几次都使用不了。排查网络等问题，在社区找到了答案。推出一年多不支持企业账户，所以之前的折腾都是浪费时间。因为这个答案不太…...

编程日记 2025/6/3 21:55:15

Sentaurus TCAD学习笔记：transform指令

目录一、transform指令简介二、transform指令的实现1.cut指令2.flip指令3.rotate指令4.stretch指令5.translate指令6.reflect指令三、transform指令示例一、transform指令简介在Sentaurus中，如果需要对器件进行翻转、平移等操作，可以通过transform指…...

编程日记 2025/6/3 12:53:27

SpringBoot+Lombok项目实体属性名xXxx格式，前端接收不到

问题解析今天发现后端传给前端的实体类中，有属性为xXxxx格式的，前端也使用相同名称接收，结果却不显示值！研究了一会发现接口请求回来后，原xXxxx的属性名，会被转为全小写。具体原因为：使用Lombo…...

编程日记 2025/6/3 21:54:59

初识JAVA-面向对象的三大特征之多态

1. 重温面向对象面向对象是一种解决问题的思想，它把计算机程序看作是各种对象组合起来的。每个对象都有自己的数据（属性）和行为（方法），主要依靠对象之间的交互来解决和实现问题。Java是一门纯面向对象的语…...

编程日记 2025/6/3 21:53:18

测试链接勿看

这里写自标题自定义定阿萨德义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定…...

编程日记 2025/6/3 21:53:51

SQL中的行转列，列转行

SQL中的行列转换 1. 导入有这样两张表，这两张表如何互相转换 student_table score_table 2. 行转列使用 UNION ALL -- 行转列 SELECT name,语文 as subject,chinese_score as score FROM student_table UNION ALL SELECT name,数学 as subject,math_score…...

编程日记 2025/6/3 12:23:43

Windows的Redis查看自己设置的密码并更改设置密码

查看密码由于我的Redis安装很久了，所以忘记是否有设置密码，查看步骤如下： 启动redis，启动流程可以看这篇文章：https://blog.csdn.net/changyana/article/details/127679871 在redis安装目录下打开redis-cli.exe&…...

编程日记 2025/6/3 21:53:35

初阶数据结构【队列及其接口的实现】

目录前言一、队列的概念及结构二、队列的实现方式三、队列的实现3.1 基本结构3.2 队列基本功能接口初始化队列销毁队列 3.3 入队列接口3.4 出队列接口3.5 队列的其它接口获取队列头部元素获取队列队尾元素检测队列是否为空获取队列中有效元素个数 3.6 测试总结前言上一期我…...

编程日记 2025/6/3 21:54:08

dockerfile1.0

docker的数据卷 docker file ------------- 自动自定义镜像 docker的数据卷： 容器与宿主机之间，或者容器和容器之间的数据共享（目录） 创建容器的时候，通过指定目录，实现容器于宿主机之间，或…...

编程日记 2025/6/2 23:03:00

CES 2025｜全面拥抱端侧AI，美格智能在CES发布系列创新成果

要点： ▶ 在AI机器人领域，以高算力AI模组助力发布“通天晓”人形机器人和2款全新微小型AI机器人 ▶ 在AI硬件领域，发布消费级AI智能体产品——AIMO，引领个人专属的大模型时代 ▶ 在5G通信领域，发布全新5GWiFi-7 CPE…...

编程日记 2025/6/3 1:30:58

【9.1】Golang后端开发系列--Gin快速入门指南

文章目录一、引言 🌟二、Gin 框架概述 📖（一）什么是 Gin（二）为什么选择 Gin 三、安装 Gin 框架 📦（一）安装 Go 语言环境（二）使用 Go Modules 安装…...

编程日记 2025/5/29 0:05:07

电商系统，核心通用架构案例设计方案浅析

文章目录一、用户系统案例设计1、用户信息的存储方案2、用户注册确保唯一3、用户数据合并方案4、用户敏感信息加密存储5、数据传输安全性6、多用户数据隔离性7、防止恶意注册8、用户好友关系存储方案9、用户登录token方案10、会员优先处理设计二、网关系统设计1、网关的功能2…...

编程日记 2025/6/1 8:09:17

易飞ERP 9.2 安装包百度云盘下载

易飞9.2是鼎捷数智依托四十多年实践经验，面向中小企业的全面ERP解决方案‌。以下是关于易飞9.2的详细介绍： ‌发布与更新‌： ‌发布时间‌：易飞V9.2新版发布于2023年9月。 ‌核心功能‌： ‌便捷高效‌&#xff1…...

编程日记 2025/6/2 23:04:24

3D目标检测数据集——Waymo数据集

Waymo数据集簡介发布首页：https://waymo.com/open/ 论文：https://openaccess.thecvf.com/content_CVPR_2020/papers/Sun_Scalability_in_Perception_for_Autonomous_Driving_Waymo_Open_Dataset_CVPR_2020_paper.pdf github：https://github.…...

编程日记 2025/6/3 8:06:30

LSA更新、撤销

LSA的新旧判断： 1.seq，值越大越优先 2.chksum，值越大越优先 3.age，本地的LSA age和收到的LSA age作比较如果差值<900s，认为age一致，保留本地的：我本地有一条LSA是100 你给的是400 差值小于…...

编程日记 2025/6/4 1:13:33

Redis复制（replica）

Redis主从复制 [Redis主从复制]（replica）是一个多Redis实例进行数据同步的过程，其中一个实例是主实例（Master），其他实例是从实例（Slave）。主实例负责处理命令请求，而从实…...

编程日记 2025/6/2 23:04:06

Ubuntu上，ffmpeg如何使用cuda硬件解码、编码、转码加速

本文使用 Ubuntu 环境。Ubuntu 直接使用 APT 安装的就支持 CUDA 加速。本文使用这样下载的版本进行演示，你自己编译或者其他源的版本可能会不同。 ffmpeg 的一些介绍，以及 macOS 版本的 ffmpeg 硬件加速请见《macOS上如何安装（不需要编译安装…...

编程日记 2025/6/2 23:03:16

磁盘满造成业务异常问题排查

最近遇到一个因为磁盘满导致的问题，分享一下，希望能够帮助到以后遇到同样问题的朋友。早上突然收到业务老师反馈说：上传文件不能正常上传了。想想之前都好好的，最近又没有更新，为什么突然不能使用了呢？…...

编程日记 2025/6/2 23:03:51

vim基本命令（vi、工作模式、普通模式、插入模式、可视模式、命令行模式、复制、粘贴、插入、删除、查找、替换）

1. Vim的作用 1.1. 文本编辑 1.1.1. 基础文本编辑功能 Vim是一个功能强大的文本编辑器，它可以用来创建、修改和保存各种文本文件。无论是编写简单的文本笔记，还是复杂的代码文件，Vim都能胜任。例如，我们可以用它来编写Python脚…...

编程日记 2025/6/4 5:30:22

vue的KeepAlive应用（针对全部页面及单一页面进行缓存）

KeepAlive的作用是缓存包裹在其中的动态切换组件当一个组件在中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。这适用于的直接子节点及其所有子孙节点。缓存全部页面将app.vue中的路由出口改为&am…...

编程日记 2025/6/4 7:00:03

Big Model weekly | 第53期

点击蓝字关注我们 AI TIME欢迎每一位AI爱好者的加入！ 01 CodeRosetta: Pushing the Boundaries of Unsupervised Code Translation for Parallel Programming 近期在大型语言模型（LLMs）的进展重新激发了自动编程语言翻译的兴趣。特别是编码器…...

编程日记 2025/6/4 7:01:37