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

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

news 2026/2/9 10:54:37

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

编程新知 2026/2/8 4:37:06

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

编程新知 2026/1/24 14:15:43

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++，无法导入ardupilot代码，会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

编程新知 2026/1/31 5:06:34

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2026/1/27 13:20:11

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

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

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置 配置manifest 文档&#xff1a;manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包 下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号&#xff1a;4.66 对应的sdk版本 4.66 两者必须一致 本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07

Xela矩阵三轴触觉传感器的工作原理解析与应用场景

Xela矩阵三轴触觉传感器通过先进技术模拟人类触觉感知&#xff0c;帮助设备实现精确的力测量与位移监测。其核心功能基于磁性三维力测量与空间位移测量&#xff0c;能够捕捉多维触觉信息。该传感器的设计不仅提升了触觉感知的精度&#xff0c;还为机器人、医疗设备和制造业的智…...

编程新知 2026/2/6 12:27:51

上位机开发过程中的设计模式体会(1)：工厂方法模式、单例模式和生成器模式

简介 在我的 QT/C 开发工作中&#xff0c;合理运用设计模式极大地提高了代码的可维护性和可扩展性。本文将分享我在实际项目中应用的三种创造型模式&#xff1a;工厂方法模式、单例模式和生成器模式。 1. 工厂模式 (Factory Pattern) 应用场景 在我的 QT 项目中曾经有一个需…...

编程新知 2025/8/18 3:01:22