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

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

news 2025/7/13 22:27:40

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/1/16 9:12:03

mysql 等保处理，设置wait_timeout引发的问题

👨‍⚕ 主页： gis分享者 👨‍⚕ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕ 收录于专栏：运维工程师文章目录前言问题处理前言系统部署完成后，客户需要做二级等保&…...

编程日记 2025/1/16 9:10:00

7.STM32F407ZGT6-RTC

参考： 1.正点原子前言： RTC实时时钟是很基本的外设，用来记录绝对时间。做个总结，达到： 1.学习RTC的原理和概念。 2.通过STM32CubeMX快速配置RTC。 27.1 RTC 时钟简介 STM32F407 的实时时钟（RTC&#xf…...

编程日记 2025/1/16 9:07:57

重写（补充）

大家好，今天我们把剩下一点重写内容说完，来看。 [重写的设计规则] 对于已经投入使用的类,尽量不要进行修政 ，最好的方式是:重新定义一个新的类,来重复利用其中共性的内容我们不该在原来的类上进行修改，因为原来的类,可能还有用…...

编程日记 2025/1/16 9:01:50

30分钟内搭建一个全能轻量级springboot 3.4 + 脚手架＜3＞5分钟集成好druid并使用druid自带监控工具监控sql请求

快速导航快速导航 <1> 5分钟快速创建一个springboot web项目 <2> 5分钟集成好最新版本的开源swagger ui，并使用ui操作调用接口 <3> 5分钟集成好druid并使用druid自带监控工具监控sql请求 <4> 5分钟集成好mybatisplus并使用mybatisplus g…...

编程日记 2025/1/16 9:00:49

【C#深度学习之路】如何使用C#实现Yolo8/11 Segment 全尺寸模型的训练和推理

【C#深度学习之路】如何使用C#实现Yolo8/11 Segment 全尺寸模型的训练和推理项目背景项目实现推理过程训练过程项目展望写在最后项目下载链接本文为原创文章，若需要转载，请注明出处。原文地址：https://blog.csdn.net/qq_30270773/article…...

编程日记 2025/1/16 8:55:44

Oracle 分区索引简介

目录一. 什么是分区索引二. 分区索引的种类2.1 局部分区索引（Local Partitioned Index）2.2 全局分区索引（Global Partitioned Index） 三. 分区索引的创建四. 分区索引查看4.1 USER_IND_COLUMNS 表4.2 USER_INDEXES 表五. 分区索…...

编程日记 2025/1/16 8:54:42

【科技赋能未来】NDT2025第三届新能源数字科技大会全面启动！

随着我国碳达峰目标、碳中和目标的提出，以及经济社会的发展进步，以风电、光伏发电为代表的新能源行业迎来巨大发展机遇，成为未来绿色经济发展的主要趋势和方向。此外，数字化技术的不断发展和创新，其在新能源领域的应…...

编程日记 2025/1/16 8:50:34

Broker收到消息之后如何存储

1.前言此文章是在儒猿课程中的学习笔记，感兴趣的想看原来的课程可以去咨询儒猿课堂《从0开始带你成为RocketMQ高手》，我本人觉得这个作者还是不错，都是从场景来进行分析，感觉还是挺适合我这种小白的。这块主要都是我自己的学习笔…...

编程日记 2025/1/16 8:49:32

Mysql--实战篇--SQL优化（查询优化器，常用的SQL优化方法，执行计划EXPLAIN，Mysql性能调优，慢日志开启和分析等）

一、查询优化 1、查询优化器 (Query Optimizer) MySQL查询优化器（Query Optimizer）是MySQL数据库管理系统中的一个关键组件，负责分析和选择最有效的执行计划来执行SQL查询。查询优化器的目标是尽可能减少查询的执行时间和资源消耗&#xff…...

编程日记 2025/1/16 8:48:29

BERT与CNN结合实现糖尿病相关医学问题多分类模型

完整源码项目包获取→点击文章末尾名片！ 使用HuggingFace开发的Transformers库，使用BERT模型实现中文文本分类（二分类或多分类） 首先直接利用transformer.models.bert.BertForSequenceClassification()实现文本分类然后手动实现B…...

编程日记 2025/1/16 8:43:24

rabbitmqp安装延迟队列

在RabbitMQ中，延迟队列是一种特殊的队列类型。当消息被发送到此类队列后，不会立即投递给消费者，而是会等待预设的一段时间，待延迟期满后才进行投递。这种队列在多种场景下都极具价值，比如可用于处理需要在特定时间触发…...

编程日记 2025/1/16 8:39:21

深入探讨DICOM医学影像中的MPPS服务及其具体实现

深入探讨DICOM医学影像中的MPPS服务及其具体实现 1. 引言在医疗影像的管理和传输过程中，DICOM（数字影像和通信医学）标准发挥着至关重要的作用。除了DICOM影像的存储和传输（如影像存储SCP和影像传输SCP），…...

编程日记 2025/1/16 8:31:10

集合帖：区间问题

一、AcWing 803：区间合并 （1）题目来源：https://www.acwing.com/problem/content/805/ （2）算法代码：https://blog.csdn.net/hnjzsyjyj/article/details/145067059 #include <bits/stdc.h>…...

编程日记 2025/1/16 8:27:06

C#，入门教程(27)——应用程序（Application）的基础知识

上一篇： C#，入门教程(26)——数据的基本概念与使用方法https://blog.csdn.net/beijinghorn/article/details/124952589 一、什么是应用程序 Application？ 应用程序是编程的结果。一般把代码经过编译（等）过程&#…...

编程日记 2025/1/16 8:26:04

迅翼SwiftWing | ROS 固定翼开源仿真平台正式发布!

经过前期内测调试，ROS固定翼开源仿真平台今日正式上线！现平台除适配PX4ROS环境外，也已实现APROS环境下的单机飞行控制仿真适配。欢迎大家通过文末链接查看项目地址以及具体使用手册。 1 平台简介 ROS固定翼仿真平台旨在实现固定翼无人机决策…...

编程日记 2025/1/16 8:25:02

CSS 样式 box-sizing: border-box；详细解读

box-sizing是 CSS 中的一个属性，用于控制元素的盒模型计算方式。border-box值表示元素的宽度和高度将包括内边距（padding）和边框（border），而不仅仅是内容的宽度和高度。这意味着当你为元素设置宽度和高度时…...

编程日记 2025/1/16 8:23:00

FLASK创建下载

html用a标签  <a href"{{ url_for(download_file, filenameimage.png) }}"><button>Download Image</button> </a> 后端：url_for双大括号即是用来插入变量到模板中的语法。也就是绑…...

编程日记 2025/1/16 8:19:58

漫话架构师|什么是系统架构设计师（开篇）

~犬📰余~ “我欲贱而贵，愚而智，贫而富，可乎？ 曰：其唯学乎” 关注犬余，共同进步技术从此不孤单...

编程日记 2025/1/16 8:18:55

Web Socket

Web Socket ‌WebSocket‌是一种基于TCP的网络通信协议，允许客户端和服务器之间建立全双工（双向）通信通道。WebSocket通过HTTP协议进行握手，建立连接后，客户端和服务器可以在同一个连接上同时发送和接收数据&#xff0…...

编程日记 2025/1/16 8:12:40

深入剖析AI大模型：大模型时代的 Prompt 工程全解析

今天聊的内容，我认为是AI开发里面非常重要的内容。它在AI开发里无处不在，当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"，或者让翻译模型 "将这段合同翻译成商务日语" 时，输入的这句话就是 Prompt。…...

编程新知 2025/7/11 8:23:31

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统，智慧工地全套源码，java版智慧工地源码，支持PC端、大屏端、移动端。智慧工地聚焦建筑行业的市场需求，提供“平台网络终端”的整体解决方案，提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/7/12 22:22:35

《Playwright：微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...

编程新知 2025/7/12 23:08:16

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器纯前端实现高延迟高流量帧率极低个人demo测试超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...

编程新知 2025/7/13 18:03:35

EtherNet/IP转DeviceNet协议网关详解

一，设备主要功能疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络，本网关连接到EtherNet/IP总线中做为从站使用，连接到DeviceNet总线中做为从站使用。在自动…...

编程新知 2025/7/13 7:49:09

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库，例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体，比如 SnowballFight、Huggy the Do…...

编程新知 2025/7/9 18:07:15

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

编程新知 2025/7/12 14:07:37