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

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

news 2025/11/11 3:49:07

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

Java 语言特性(面试系列1)

一、面向对象编程 1. 封装&#xff08;Encapsulation&#xff09; 定义&#xff1a;将数据&#xff08;属性&#xff09;和操作数据的方法绑定在一起&#xff0c;通过访问控制符&#xff08;private、protected、public&#xff09;隐藏内部实现细节。示例&#xff1a; public …...

编程新知 2025/10/6 4:03:40

突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

编程新知 2025/11/7 19:17:39

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/10/5 6:41:51

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/11/8 2:25:57

leetcodeSQL解题：3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

编程新知 2025/10/5 19:58:27

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/11/9 17:39:07

汇编常见指令

汇编常见指令 一、数据传送指令 指令功能示例说明MOV数据传送MOV EAX, 10将立即数 10 送入 EAXMOV [EBX], EAX将 EAX 值存入 EBX 指向的内存LEA加载有效地址LEA EAX, [EBX4]将 EBX4 的地址存入 EAX&#xff08;不访问内存&#xff09;XCHG交换数据XCHG EAX, EBX交换 EAX 和 EB…...

编程新知 2025/11/4 20:56:54

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2025/11/7 14:06:56

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/11/7 14:06:31