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

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

news 2025/9/14 20:08:08

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引发的问题

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

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

7.STM32F407ZGT6-RTC

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

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

重写（补充）

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

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

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

快速导航 快速导航 <1> 5分钟快速创建一个springboot web项目 <2> 5分钟集成好最新版本的开源swagger ui&#xff0c;并使用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 全尺寸模型的训练和推理 项目背景项目实现推理过程训练过程 项目展望写在最后项目下载链接 本文为原创文章&#xff0c;若需要转载&#xff0c;请注明出处。 原文地址&#xff1a;https://blog.csdn.net/qq_30270773/article…...

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

Oracle 分区索引简介

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

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

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

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

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

Broker收到消息之后如何存储

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

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

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

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

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

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

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

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

rabbitmqp安装延迟队列

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

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

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

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

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

集合帖：区间问题

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

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

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

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

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

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

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

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

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

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

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

FLASK创建下载

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

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

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

~犬&#x1f4f0;余~ “我欲贱而贵&#xff0c;愚而智&#xff0c;贫而富&#xff0c;可乎&#xff1f; 曰&#xff1a;其唯学乎” 关注犬余&#xff0c;共同进步 技术从此不孤单...

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

Web Socket

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

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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的？

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

编程新知 2025/7/12 23:55:04

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

编程新知 2025/9/7 8:52:44

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

编程新知 2025/9/11 8:06:49

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/8/21 20:18:45

Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！

一、引言 在数据驱动的背景下&#xff0c;知识图谱凭借其高效的信息组织能力&#xff0c;正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合&#xff0c;探讨知识图谱开发的实现细节&#xff0c;帮助读者掌握该技术栈在实际项目中的落地方法。 …...

编程新知 2025/9/11 9:34:44

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...

编程新知 2025/9/14 5:50:03

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

编程新知 2025/7/9 2:49:50

C#学习第29天：表达式树（Expression Trees）

目录 什么是表达式树&#xff1f; 核心概念 1.表达式树的构建 2. 表达式树与Lambda表达式 3.解析和访问表达式树 4.动态条件查询 表达式树的优势 1.动态构建查询 2.LINQ 提供程序支持&#xff1a; 3.性能优化 4.元数据处理 5.代码转换和重写 适用场景 代码复杂性…...

编程新知 2025/7/21 4:21:36

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...

编程新知 2025/9/13 11:14:21

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日&#xff0c;嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》&#xff0c;海云安高敏捷信创白盒&#xff08;SCAP&#xff09;成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天&#xff0c;网络安全已成为企业生存与发展的核心基石&#xff0c;为了解…...

编程新知 2025/9/9 10:05:02