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

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

news 2026/4/1 18:12:10

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

C++ 网络服务端主线：从线程池到 Reactor 的完整路线图

一、为什么要写这个系列&#xff1f; 前面我已经把 C 并发基础和线程池完整走了一遍&#xff1a; std::threadstd::mutexstd::condition_variablestd::atomic手写线程池future / 拒绝策略 / 优雅关闭 但到这里&#xff0c;其实还只停留在&#xff1a; 并发组件层 也就是说&a…...

编程新知 2026/4/1 18:08:09

终极指南：如何使用Harepacker-resurrected打造个性化MapleStory游戏体验

终极指南&#xff1a;如何使用Harepacker-resurrected打造个性化MapleStory游戏体验 【免费下载链接】Harepacker-resurrected All in one .wz file/map editor for MapleStory game files 项目地址: https://gitcode.com/gh_mirrors/ha/Harepacker-resurrected 你是否曾…...

编程新知 2026/4/1 16:55:18

用快马AI十分钟搞定数据库课程设计原型：学生选课系统从ER图到可运行Demo

今天想和大家分享一个超实用的数据库课程设计经验——如何用InsCode(快马)平台快速搭建学生选课系统原型。作为计算机专业学生&#xff0c;每次做数据库课设最头疼的就是从零开始写代码&#xff0c;但这次我发现了一个超级省时的方法。 ER图设计思路 首先需要明确系统核心实体&…...

编程新知 2026/4/1 15:17:44

从下载到运行：Pi0模型完整部署指南，适合新手入门

从下载到运行&#xff1a;Pi0模型完整部署指南&#xff0c;适合新手入门 1. 项目简介&#xff1a;什么是Pi0&#xff1f; Pi0是一个视觉-语言-动作流模型&#xff0c;专门为通用机器人控制设计。简单来说&#xff0c;它能让机器人“看懂”周围环境&#xff0c;“听懂”你的指…...

编程新知 2026/4/1 14:13:59

SAP-FICO LSMW实战：批量导入财务凭证与固定资产主数据(AS91)的完整指南

1. LSMW基础概念与适用场景 第一次接触LSMW这个工具时&#xff0c;我也被它复杂的界面吓到过。但用顺手后发现&#xff0c;这简直是SAP数据迁移的"瑞士军刀"。简单来说&#xff0c;LSMW&#xff08;Legacy System Migration Workbench&#xff09;是SAP系统内置的数…...

编程新知 2026/4/1 14:11:59

厦门GEO软件哪家强？实测主流平台，为你揭秘推荐榜单

在数字化转型浪潮中&#xff0c;GEO&#xff08;地理定位优化&#xff09;软件成为企业提升本地化营销效率的关键工具。面对厦门市场上琳琅满目的GEO平台&#xff0c;如何选择一款适配自身业务需求、技术稳定且安全合规的解决方案&#xff0c;成为众多企业面临的难题。作为第三…...

编程新知 2026/4/1 14:07:47

2025_NIPS_Prompt Tuning Transformers for Data Memorization

文章核心总结与翻译 一、主要内容 文章聚焦提示调优（Prompt Tuning）在Transformer模型数据记忆能力上的表现，通过理论分析与实证研究，明确提示调优的记忆机制与关键特性： 理论层面：推导了精确记忆有限数据集所需的提示长度上界，证明常数规模Transformer可通过长度为O~…...

编程新知 2026/4/1 13:55:32

Phi-3-mini-4k-instruct-gguf应用落地：律师助理合同风险点识别与提示生成

Phi-3-mini-4k-instruct-gguf应用落地&#xff1a;律师助理合同风险点识别与提示生成 1. 项目背景与价值 在法律服务领域&#xff0c;合同审查是律师日常工作中最耗时且重复性高的任务之一。传统人工审查方式存在效率低下、容易遗漏细节等问题。Phi-3-mini-4k-instruct-gguf作…...

编程新知 2026/4/1 13:31:00

LosslessCut：解锁无损视频编辑的5个专业技巧

LosslessCut&#xff1a;解锁无损视频编辑的5个专业技巧 【免费下载链接】lossless-cut The swiss army knife of lossless video/audio editing 项目地址: https://gitcode.com/gh_mirrors/lo/lossless-cut 在数字内容创作领域&#xff0c;视频质量与处理效率往往难以兼…...

编程新知 2026/4/1 12:18:12

Unity Shader UV 坐标与纹理平铺Tiling Offset 深度解析

从 UV 空间的数学本质出发&#xff0c;理解 URP 中纹理坐标的缩放&#xff08;Tiling&#xff09;与偏移&#xff08;Offset&#xff09;控制原理&#xff0c; 并掌握 Shader Graph、HLSL、C# 三种维度的实践技巧。UV 坐标系基础在实时渲染中&#xff0c;UV 坐标是将二维纹理贴…...

编程新知 2026/4/1 11:51:48