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

【HTML5】拖放详解及实现案例

news 2026/4/2 10:08:43

文章目录

    • 效果预览
    • 代码实现

效果预览

在这里插入图片描述

代码实现

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>一颗不甘坠落的流星</title><style>#div1,#div2 {float: left;width: 100px;height: 27px;margin: 10px;padding: 24px 0;text-align: center;border: 1px solid #aaaaaa;}span {display: inline-block;width: 50px;height: 25px;background-color: greenyellow;}</style></head><body><!-- 4. ondragover 事件规定被拖动的数据能够被放置到何处。 --><!-- 6. 当放开被拖数据时，会发生 drop 事件。 --><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><!-- 1. 为了把一个元素设置为可拖放，请把 draggable 属性设置为 true --><!-- 2. ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。 --><span draggable="true" ondragstart="drag(event)" id="drag1"></span></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body><script type="text/javascript">function allowDrop(ev) {// 5. 默认地，数据/元素无法被放置到其他元素中。// 为了实现拖放，我们必须阻止元素的这种默认的处理方式。// 由 ondragover 事件的 event.preventDefault() 方法完成ev.preventDefault();}function drag(ev) {// 3. dataTransfer.setData() 方法设置被拖动数据的数据类型和值// 在本例中，数据类型是 "text"，而值是这个可拖动元素的 id ("drag1")。ev.dataTransfer.setData("Text", ev.target.id);}function drop(ev) {// 调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）ev.preventDefault();通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据var data = ev.dataTransfer.getData("Text");// 被拖数据是被拖元素的 id ("drag1")var span = document.getElementById(data)// 把被拖元素追加到放置元素中ev.target.appendChild(span);}</script>
</html>

相关文章：

【HTML5】拖放详解及实现案例

文章目录 效果预览代码实现 效果预览 代码实现 <!DOCTYPE html> <html><head><meta charset"utf-8"><title>一颗不甘坠落的流星</title><style>#div1,#div2 {float: left;width: 100px;height: 27px;margin: 10px;paddin…...

编程日记 2023/7/29 16:30:04

Codeforces Round 888 (Div. 3)（视频讲解全部题目）

[TOC](Codeforces Round 888 (Div. 3)&#xff08;视频讲解全部题目&#xff09;) Codeforces Round 888 (Div. 3)&#xff08;A–G&#xff09;全部题目详解 A Escalator Conversations #include<bits/stdc.h> #define endl \n #define INF 0x3f3f3f3f using namesp…...

编程日记 2023/7/29 16:29:03

MySQL之深入InnoDB存储引擎——物理文件

文章目录 一、参数文件二、日志文件三、表结构定义文件四、InnoDB 存储引擎文件1、表空间文件2、重做日志文件 一、参数文件 当 MySQL 实例启动时&#xff0c;数据库会先去读一个配置参数文件&#xff0c;用来寻找数据库的各种文件所在位置以及指定某些初始化参数。在默认情况…...

编程日记 2023/7/29 16:28:02

Jquery操作html常用函数

1. text() 获取元素的文本内容&#xff1a;$("#element").text(); 设置元素的文本内容&#xff1a;$("#element").text("New Text"); 2. html() 获取元素的 HTML 内容&#xff1a;$("#element").html(); 设置元素的 HTML 内容&am…...

编程日记 2023/7/29 16:27:01

【Lua学习笔记】Lua进阶——Table，迭代器

文章目录 官方唯一指定数据结构--tabletable的一万种用法字典和数组 迭代器ipairs()pairs() 回到Table 在【Lua学习笔记】Lua入门中我们讲到了Lua的一些入门知识点&#xff0c;本文将补充Lua的一些进阶知识 官方唯一指定数据结构–table 在上篇文章的最后&#xff0c;我们指出…...

编程日记 2023/7/29 16:25:59

重庆市北斗新型智慧城市政府项目

技术栈&#xff1a;使用vue2JavaScriptElementUIvuexaxiosmapboxcesium 项目描述&#xff1a;重庆市北斗新型智慧城市政府项目是基于千寻孪界开发的一款智慧城市项目&#xff0c;包含车辆实时位置定位&#xff0c;智能设备的报警&#xff0c;基础设施的部设等等功能 工作内容&a…...

编程日记 2023/7/29 16:24:57

FANUC机器人SRVO-217故障报警原因分析及参考解决办法

FANUC机器人SRVO-217故障报警原因分析及参考解决办法 如下图所示，示教器提示：SRVO-217紧急停止电路板未找到， 查阅手册可以看到以下的报警说明： 故障原因： 通电时未能识别紧急停止电路板或者增设的安全I/O装置。连接有多个安全I/O装置的系统中，在报警信息的最后，会显示发…...

编程日记 2023/7/29 16:23:56

统信UOS安装mysql数据库（mariadb）-统信UOS安装JDK-统信UOS安装nginx（附安装包）

统信UOS离线全套安装教程&#xff08;手把手教程&#xff09; 银河麒麟的各种离线全套安装教程&#xff1a; https://blog.csdn.net/ACCPluzhiqi/article/details/131988147 1.统信UOS桌面系统安装mysql&#xff08;mariadb&#xff09; 2.统信UOS桌面系统安装JDK 3.统信UOS桌…...

编程日记 2023/7/29 16:22:55

上门小程序开发|上门服务小程序|上门家政小程序开发

随着移动互联网的普及和发展&#xff0c;上门服务成为了许多人生活中的一部分。上门小程序是一种基于小程序平台的应用程序&#xff0c;它提供了上门服务的在线平台&#xff0c;为用户提供了便捷的上门服务体验。下面将介绍一些适合开发上门小程序的商家。 　　家政服务商家&am…...

编程日记 2023/7/29 16:21:53

1000道网络安全必备面试题合集，秋招金九银十必看！！！

以下为网络安全各个方向涉及的面试题&#xff0c;星数越多代表问题出现的几率越大&#xff0c;祝各位都能找到满意的工作。 注&#xff1a;本套面试题&#xff0c;已整理成pdf文档&#xff0c;但内容还在持续更新中&#xff0c;因为无论如何都不可能覆盖所有的面试问题&#x…...

编程日记 2023/7/29 16:20:51

从0-1实现简易Raft分布式共识算法

一、Raft前置简介 Raft目前是最著名的分布式共识性算法&#xff0c;被广泛的应用在各种分布式框架、组件中&#xff0c;如Redis、RocketMq、Kafka、Nacos&#xff08;CP&#xff09;等 根据Raft论文&#xff0c;可将Raft拆分为如下4个功能模块&#xff1a; 领导者选举日志同…...

编程日记 2023/7/29 16:19:50

Spring 创建和使用

Spring 是⼀个包含了众多⼯具⽅法的 IoC 容器。既然是容器那么它就具备两个最基本的功能&#xff1a; 将对象存储到容器&#xff08;Spring&#xff09;中&#xff1b; 从容器中将对象取出来。 在 Java 语⾔中对象也叫做 Bean 1.创建 Spring 项目 接下来使⽤ Maven ⽅式来创…...

编程日记 2023/7/29 16:18:49

Javadoc comment自动生成

光标放在第二行 按下Alt Shift j 下面是Java doc的生成 Next Next-> Finish...

编程日记 2023/7/29 16:17:48

vue3 +ts 报错 index.vue 不是模块

那是因为index.vue中创建了一个空的script标签&#xff0c;而且语法使用的是ts语法。vue-cli会用ts语法解析和校验 如果是无状态组件&#xff0c;删掉 如果是有状态组件&#xff0c;导出该组件的实例 去掉null的script后&#xff1a;...

编程日记 2023/7/29 16:16:46

win10 hadoop报错 unable to load native-hadoop library

win10 安装hadoop执行hdfs -namenode format 和运行hadoop的start-all报错 unable to load native-hadoop library 验证&#xff1a; hadoop checknative -a 这个命令返回都是false是错的 返回下图是正确的 winutils: true D:\soft\hadoop-3.0.0\bin\winutils.exe Native li…...

编程日记 2023/7/29 16:15:45

前端（九）——探索微信小程序、Vue、React和Uniapp生命周期

&#x1f642;博主&#xff1a;小猫娃来啦 &#x1f642;文章核心&#xff1a;探索微信小程序、Vue、React和Uniapp生命周期 文章目录 微信小程序、Vue、React和Uniapp的基本定义和应用领域微信小程序生命周期生命周期概述页面生命周期应用生命周期组件和API的生命周期钩子 Vu…...

编程日记 2023/7/29 16:14:44

MyBatis查询数据库（2）

目录 前言&#x1f36d; 一、增删查改操作 1、查 Ⅰ、mapper接口&#xff1a; Ⅱ、UserMapper.xml 查询所有用户的具体实现 SQL&#xff1a; Ⅲ、进行单元测试 2、增、删、改操作 Ⅰ、增 添加用户 添加用户并且返回自增 id Ⅱ、改 根据id修改用户名 开启 MyBatis …...

编程日记 2023/7/29 16:13:42

Jenkins构建完成后发送消息至钉钉

钉钉群的最终效果&#xff1a; 1、jenkins安装DingTalk插件&#xff0c;安装完成后重启 2、配置钉钉插件 参考官网文档&#xff1a;快速开始 | 钉钉机器人插件 系统管理 拉到最下面&#xff0c;可以看到钉钉配置 按照如下配置钉钉机器人 配置完成可以点击测试按钮&#xff0…...

编程日记 2023/7/29 16:12:40

从浏览器输入url到页面加载（六）前端必须了解的路由器和光纤小知识

前言 上一章我们说到了数据包在网线中的故事&#xff0c;说到了双绞线&#xff0c;还说到了麻花。这一章继续沿着这条线路往下走&#xff0c;说一些和cdn以及路由器相关&#xff0c;运营商以及光纤相关的小知识&#xff0c;前端同学应该了解一下的 目录 前言 1. CDN和路由器…...

编程日记 2023/7/29 16:11:39

C语言假期作业 DAY 06

题目 一、选择题 1、以下叙述中正确的是&#xff08; &#xff09; A: 只能在循环体内和 switch 语句体内使用 break 语句 B: 当 break 出现在循环体中的 switch 语句体内时&#xff0c;其作用是跳出该 switch 语句体&#xff0c;并中止循环体的执行 C: continue 语句的作用是&…...

编程日记 2023/7/29 16:10:36

SAM 3图像视频分割实战：上传图片视频，输入英文名称一键搞定

SAM 3图像视频分割实战&#xff1a;上传图片视频&#xff0c;输入英文名称一键搞定 1. 引言&#xff1a;认识SAM 3的强大能力 想象一下&#xff0c;你有一张复杂的街景照片&#xff0c;想要单独提取其中的行人、车辆或建筑物。传统方法可能需要复杂的PS操作或专业标注工具&am…...

编程新知 2026/4/2 9:41:16

智能制造企业数字化转型智慧工厂建设方案：涵盖研发、供应、生产、销售、服务五大核心环节的智慧工厂建设路径

该方案围绕研发、供应、生产、销售、服务全价值链&#xff0c;融合AI、大数据、5G等技术&#xff0c;通过智能优化、智慧供应链、智能质检、数字孪生及精准营销等模块&#xff0c;构建全链路智慧工厂&#xff0c;实现降本增效与制造企业全面数字化转型。 该方案以“研发—供应…...

编程新知 2026/4/2 9:10:45

Phi-3-mini-4k-instruct-gguf保姆级教程：开箱即用的GGUF文本生成指南

Phi-3-mini-4k-instruct-gguf保姆级教程&#xff1a;开箱即用的GGUF文本生成指南 1. 认识Phi-3-mini-4k-instruct-gguf Phi-3-mini-4k-instruct-gguf是微软Phi-3系列中的轻量级文本生成模型GGUF版本。这个模型特别适合处理问答、文本改写、摘要整理和简短创作等任务。它最大的…...

编程新知 2026/4/2 9:00:38

Qwen3.5-4B-Claude-Opus镜像保姆级教程：双RTX4090D上开箱即用

Qwen3.5-4B-Claude-Opus镜像保姆级教程&#xff1a;双RTX4090D上开箱即用 1. 镜像概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF 是一个基于 Qwen3.5-4B 的推理蒸馏模型&#xff0c;重点强化了结构化分析、分步骤回答、代码与逻辑类问题的处理能力。该版本以 GG…...

编程新知 2026/4/2 8:09:55

百川2-13B-4bits开源大模型镜像免配置优势：内置check.sh脚本实现7维度健康检查

百川2-13B-4bits开源大模型镜像免配置优势&#xff1a;内置check.sh脚本实现7维度健康检查 1. 为什么说这个镜像"开箱即用"&#xff1f; 如果你之前部署过大语言模型&#xff0c;肯定经历过这些头疼事&#xff1a;环境配置报错、依赖包冲突、端口被占用、GPU显存不…...

编程新知 2026/4/2 7:21:08

小型工作室利器：OpenClaw+Qwen3.5-9B实现设计稿自动标注

小型工作室利器&#xff1a;OpenClawQwen3.5-9B实现设计稿自动标注 1. 为什么我们需要设计稿自动标注 作为一个小型设计工作室的技术负责人&#xff0c;我最近一直在寻找解决团队协作痛点的方案。设计师们每天都要花费大量时间手动标注PSD文件中的图层尺寸、间距和颜色值&…...

编程新知 2026/4/2 6:40:39

NovelAI：从文本生成到内容创作的AIGC实践

1. NovelAI&#xff1a;你的AI创作助手 第一次接触NovelAI时&#xff0c;我正被一篇商业方案折磨得焦头烂额。凌晨三点的咖啡杯旁&#xff0c;这个基于GPT模型的AI工具在15分钟内就帮我完成了初稿框架&#xff0c;那一刻我就知道&#xff0c;内容创作的方式正在被重新定义。Nov…...

编程新知 2026/4/2 6:14:26

CasRel在企业搜索中的应用：构建结构化语义索引提升召回质量

CasRel在企业搜索中的应用&#xff1a;构建结构化语义索引提升召回质量 1. 引言&#xff1a;当搜索遇到瓶颈 你有没有遇到过这种情况&#xff1a;在公司内部的知识库里搜索“2024年第三季度华东区的销售数据”&#xff0c;结果返回了一堆包含“销售”、“数据”、“华东”等关…...

编程新知 2026/4/2 5:50:01

终极指南：如何将danger-js与Webpack集成实现自动化代码审查

终极指南&#xff1a;如何将danger-js与Webpack集成实现自动化代码审查 【免费下载链接】danger-js ⚠️ Stop saying "you forgot to …" in code review 项目地址: https://gitcode.com/gh_mirrors/da/danger-js Danger JS是一个强大的自动化代码审查工具&a…...

编程新知 2026/4/2 5:29:49

快速验证汽车电子创意：用快马AI十分钟搭建CAN总线通信原型

在汽车电子和工业控制领域&#xff0c;CAN总线通信是最基础也最重要的技术之一。最近我在做一个车载设备的小项目&#xff0c;需要快速验证CAN通信功能。传统开发方式往往要花大量时间搭建底层驱动&#xff0c;但这次我尝试用InsCode(快马)平台的AI辅助功能&#xff0c;居然十分…...

编程新知 2026/4/2 3:42:21