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

html5拖放

news 2026/3/28 12:52:50

1、什么是拖放（Drag 和 Drop）

拖放，字面意思就是拖动，放置

在编程里面也是如此,拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

2、设置元素为可拖放

为了使元素可拖动，把 draggable 属性设置为 true 

文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。（可以找个网页用一个图片试一下，只能拖不能放）

文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。

<element draggable="true | false | auto" >
  • true: 可以拖动
  • false: 禁止拖动
  • auto: 跟随浏览器定义是否可以拖动

3、拖放的过程

一切事情的过程都可以分为三种状态

开始----进行中-----结束

拖拽也是如此

事件On 型事件处理程序触发时刻
dragondrag当拖拽元素或选中的文本时触发。
dragendondragend当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). (见结束拖拽)
dragenterondragenter当拖拽元素或选中的文本到一个可释放目标时触发（见 指定释放目标）。
dragleaveondragleave当拖拽元素或选中的文本离开一个可释放目标时触发。
dragoverondragover当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。
dragstartondragstart当用户开始拖拽一个元素或选中的文本时触发（见开始拖拽操作）。
dropondrop当元素或选中的文本在可释放目标上被释放时触发（见执行释放）。

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此，我们必须阻止浏览器这种默认行为。e.preventDefault(); 

4、拖放的例子

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>拖放的例子</title>
<style type="text/css">
#div1, #div2 {float:left; width:100px; height:35px; margin:10px;padding:10px;border:1px solid #aaaaaa;
}
</style>
<script>//ondragover 事件规定在何处放置被拖动的数据。
//默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
//这要通过调用 ondragover 事件的 event.preventDefault() 方法：
function allowDrop(ev) {ev.preventDefault();
}//ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
//dataTransfer.setData() 方法设置被拖数据的数据类型和值
function drag(ev) {ev.dataTransfer.setData("Text",ev.target.id);
}//当放置被拖数据时，会发生 drop 事件。
//在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
//调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
//通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
//被拖数据是被拖元素的 id ("drag1")
//把被拖元素追加到放置元素（目标元素）中
function drop(ev) {ev.preventDefault();var data=ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));
}</script>
</head>
<body><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="/images/logo.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"></div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div></body>
</html>

相关文章：

html5拖放

1、什么是拖放&#xff08;Drag 和 Drop&#xff09; 拖放&#xff0c;字面意思就是拖动&#xff0c;放置 在编程里面也是如此,拖放是一种常见的特性&#xff0c;即抓取对象以后拖到另一个位置。 在 HTML5 中&#xff0c;拖放是标准的一部分&#xff0c;任何元素都能够拖放。…...

编程日记 2024/11/11 17:01:05

卫导调零天线功率倒置算法原理及MATLAB仿真

卫导调零天线功率倒置算法原理及MATLAB仿真 文章目录 前言一、调零天线简介二、功率倒置自适应算法三、MATLAB仿真四、MATLAB代码总结 前言 \;\;\;\;\; 自适应调零抗干扰技术可以很大程度改善导航抗干扰性能&#xff0c;也是目前导航抗干扰技术中不可或缺的&#xff0c;其研究意…...

编程日记 2024/11/11 16:55:57

【划分型 DP】力扣139. 单词拆分

给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例 1&#xff1a; 输入: s “leetcode”, wordDic…...

编程日记 2024/11/11 16:54:55

Python学习从0到1 day26 第三阶段 Spark ④ 数据输出

半山腰太挤了&#xff0c;你该去山顶看看 —— 24.11.10 一、输出为python对象 1.collect算子 功能: 将RDD各个分区内的数据&#xff0c;统一收集到Driver中&#xff0c;形成一个List对象 语法&#xff1a; rdd.collect() 返回值是一个list列表 示例&#xff1a; from …...

编程日记 2024/11/11 16:51:46

AWTK fscript 中的 JSON 扩展函数

fscript 是 AWTK 内置的脚本引擎&#xff0c;开发者可以在 UI XML 文件中直接嵌入 fscript 脚本&#xff0c;提高开发效率。本文介绍一下 fscript 中的 ** JSON 扩展函数 ** 1.json_load 加载 json 数据。 原型 json_load(str) > object json_load(binary) > object js…...

编程日记 2024/11/11 16:50:45

动态规划 —— dp 问题-买卖股票的最佳时机III

1. 买卖股票的最佳时机III 题目链接&#xff1a; 123. 买卖股票的最佳时机 III - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iii/description/ 2. 题目解析 3. 算法原理 状态表示&#xff1a;以某一个位置为结尾或者…...

编程日记 2024/11/11 16:48:42

“绽放艺术风采、激发强国力量” 海南省第十一届中小学生艺术展演活动圆满开展

2024年11月1日&#xff0c;由省教育厅主办、琼台师范学院承办的海南省第十一届中小学生艺术展演省级展演活动在海口正式拉开帷幕。来自全省各市县、省属学校等共计4000余名师生参加本届中小学生艺术展演现场展演活动。 本届展演活动以“绽放艺术风采、激发强国力量”为主题&…...

编程日记 2024/11/11 16:46:40

Linux之文件和目录类命令详解（2）

Linux之文件和目录类命令详解&#xff08;2&#xff09; 1、mv-移动文件或重命名2、find-查找文件和目录3、locate-快速查找文件4、du-显示目录或文件的磁盘使用情况5、df-显示文件系统的磁盘空间使用情况6、chmod-更改文件或目录的权限7、chown-更改文件或目录的拥有者8、tree…...

编程日记 2024/11/11 16:44:37

NVR管理平台EasyNVR多品牌NVR管理工具/设备摄像头开启ONVIF的方法

NVR小程序接入平台EasyNVR作为一款功能强大的安防视频监控平台&#xff0c;以其出色的兼容性和灵活性&#xff0c;在智慧校园、智慧工厂、智慧水利等多个场景中得到了广泛应用。本文将重点介绍如何为大华摄像头开启ONVIF协议&#xff0c;以便与EasyNVR进行无缝对接。 大华大部分…...

编程日记 2024/11/11 16:42:35

Pr 视频过渡：沉浸式视频

效果面板/视频过渡/沉浸式视频 Video Transitions/Immersive Video Adobe Premiere Pro 的视频过渡效果中&#xff0c;沉浸式视频 Immersive Video效果组主要用于 VR 视频剪辑之间的过渡。 自动 VR 属性 Auto VR Properties是所有 VR 视频过渡效果的通用选项。 默认勾选&#x…...

编程日记 2024/11/11 16:35:27

SwiftUI开发教程系列 - 第1章：简介与环境配置

1.1 SwiftUI简介 SwiftUI 是 Apple 于 2019 年推出的声明式用户界面框架&#xff0c;旨在简化 iOS、macOS、watchOS 和 tvOS 应用的 UI 开发。与 UIKit 的命令式编程方式不同&#xff0c;SwiftUI 提供了一种声明式语法&#xff0c;让开发者可以以更加直观、简洁的方式构建 UI。…...

编程日记 2024/11/11 16:34:26

gitlab ci/cd搭建及使用笔记

记录下使用gitlab的ci/cd的devops构建过程中&#xff0c;一些易忘点或者踩坑点&#xff1a; 官方文档中英文&#xff08;建议英文&#xff09; https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html https://gitlab.cn/docs/jh/ci/pipelines/schedules.html为什么创建了…...

编程日记 2024/11/11 16:33:24

Xcode 16 中 Swift Testing 的参数化（Parameterized）机制趣谈

概述 我们之前曾在 《用接地气的例子趣谈 WWDC 24 全新的 Swift Testing 入门》系列博文以及《WWDC24&#xff08;Xcode 16&#xff09;中全新的 Swift Testing 使用进阶》博文中较为系统地介绍了今年 WWDC 24 中全新的 Swift Testing 测试系统。 不过 Swift Testing 的本领远…...

编程日记 2024/11/11 16:32:23

Python自动化运维DevSecOps与安全自动化

Python自动化运维DevSecOps与安全自动化 目录 &#x1f6e1;️ DevSecOps概念与实践&#x1f50d; 自动化安全扫描与漏洞修复&#x1f9f0; 基于Python的安全审计与合规性检查&#x1f433; 云平台与容器安全&#xff1a;基于Python的容器扫描工具⚠️ 自定义安全检测与漏洞修…...

编程日记 2024/11/11 16:29:20

2024下半年系统架构师考试【回忆版】

2024年11月10日&#xff0c;系统架构师考试如期举行&#xff0c;屡战屡败的参试倒是把北京的学校转了好几所。 本次考试时间 考试科目考试时间综合知识、案例分析8:30 - 12:30论文14:30 - 16:30 综合知识 1、1-1000以内包含5的数字个数 2、 案例分析 1、RESTful 对于前后…...

编程日记 2024/11/11 16:22:12

UE5.4 PCG 自定义PCG蓝图节点

ExecuteWithContext&#xff1a; PointLoopBody&#xff1a; 效果&#xff1a;点密度值与缩放成正比...

编程日记 2024/11/11 16:21:11

迁移学习相关基础

迁移学习 目标 将某个领域或任务上学习到的知识或模式应用到不同但相关的领域或问题中。 主要思想 从相关领域中迁移标注数据或者知识结构、完成或改进目标领域或任务的学习效果。 概述 Target data&#xff1a;和你的任务有直接关系的数据&#xff0c;但数据量少&#xff…...

编程日记 2024/11/11 16:19:09

华为云计算HCIE-Cloud Computing V3.0试验考试北京考场经验分享

北京试验考场 北京考场位置 1.试验考场地址 北京市海淀区北清路156号中关村环保科技示范园区M地块Q21楼 考试场选择北京&#xff0c;就是上面这个地址&#xff0c;在预约考试的时候会显示地址&#xff0c;另外在临近考试的时候也会给你发邮件&#xff0c;邮件内会提示你考试…...

编程日记 2024/11/11 16:18:08

数据分析——学习框架

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 &#x1f49e;当前专栏…...

编程日记 2024/11/11 16:17:07

量化交易系统开发-实时行情自动化交易-3.4.2.Okex行情交易数据

19年创业做过一年的量化交易但没有成功&#xff0c;作为交易系统的开发人员积累了一些经验&#xff0c;最近想重新研究交易系统&#xff0c;一边整理一边写出来一些思考供大家参考&#xff0c;也希望跟做量化的朋友有更多的交流和合作。 接下来聊聊基于Okex交易所API获取行情数…...

编程日记 2024/11/11 16:15:05

2026 AI关键词搜索排名优化行业专业测评：中之网科技江苏有限公司——技术驱动，万词霸屏，全链路AI获客解决方案

2026 AI关键词搜索排名优化行业专业测评&#xff1a;中之网科技江苏有限公司——技术驱动&#xff0c;万词霸屏&#xff0c;全链路AI获客解决方案一、测评背景与核心维度随着AI大模型&#xff08;DeepSeek、豆包、腾讯元宝、Kimi、文心一言、通义千问等&#xff09;成为企业获客…...

编程新知 2026/3/28 12:37:59

告别VS手动配置！用Premake5+Lua脚本一键生成C++项目（附多平台实战案例）

告别VS手动配置&#xff01;用Premake5Lua脚本一键生成C项目&#xff08;附多平台实战案例&#xff09; 每次新建C项目时&#xff0c;你是否也厌倦了在Visual Studio中重复点击那些繁琐的配置选项&#xff1f;从平台工具集到运行时库&#xff0c;从包含目录到预处理器定义&…...

编程新知 2026/3/28 12:33:58

这是什么编码 - writeup by AI

这是什么编码 - writeup by AI &#x1f4cb; 题目信息项目内容题目名称这是什么编码来源平台BUGKU CTF题目类型Crypto (密码学)核心考点Base 家族编码识别、多层嵌套解码涉及编码Hex、Base32、Base64 &#x1f3af; 题目描述 给定的密文文件 encode.txt 中包含一串经过多重编码…...

编程新知 2026/3/28 11:39:33

Python3.9实战应用：数据分析环境搭建与常用库安装指南

Python3.9实战应用&#xff1a;数据分析环境搭建与常用库安装指南 1. 引言 Python作为数据科学领域的首选语言&#xff0c;其3.9版本在性能和功能上都为数据分析工作提供了坚实基础。本文将带你从零开始搭建一个专业的数据分析环境&#xff0c;涵盖Miniconda环境配置、Jupyte…...

编程新知 2026/3/28 10:35:00

如何安全解密微信聊天记录：WechatDecrypt本地解密工具全攻略

如何安全解密微信聊天记录&#xff1a;WechatDecrypt本地解密工具全攻略 【免费下载链接】WechatDecrypt 微信消息解密工具 项目地址: https://gitcode.com/gh_mirrors/we/WechatDecrypt 你是否曾因更换手机而丢失珍贵的聊天记录&#xff1f;是否在工作中需要提取重要的…...

编程新知 2026/3/28 8:37:54

Capacitor插件避坑指南：Android/iOS双端自动更新那些踩过的坑

Capacitor跨平台自动更新实战&#xff1a;Android与iOS双端兼容性深度解析 移动应用开发中&#xff0c;自动更新功能是提升用户体验的关键环节。对于使用Capacitor框架的开发者而言&#xff0c;如何优雅处理Android和iOS平台的差异&#xff0c;成为技术实现的核心挑战。本文将…...

编程新知 2026/3/28 8:13:44

Qwen3-1.7B效果展示：看这个1.7B参数模型如何生成高质量中文内容

Qwen3-1.7B效果展示&#xff1a;看这个1.7B参数模型如何生成高质量中文内容 1. 开篇惊艳&#xff1a;小模型的大能量 在AI大模型领域&#xff0c;参数规模往往与性能表现直接挂钩。但Qwen3-1.7B的出现打破了这一常规认知——这个仅有1.7B参数的轻量级模型&#xff0c;在中文内…...

编程新知 2026/3/28 8:09:43

数据治理平台选型，真正应该看哪几件事

上个月&#xff0c;一位在某制造业集团做数据架构的朋友跟我吐槽&#xff1a;“我们花了半年时间选型&#xff0c;最后上线的产品&#xff0c;管元数据的归元数据&#xff0c;管质量的归质量&#xff0c;两个系统之间打不通&#xff0c;数据血缘断在半路上。现在每次出了数据问…...

编程新知 2026/3/28 8:05:41

C++轻量级HTTP库cpp-httplib：从嵌入式设备到企业服务的全场景解决方案

C轻量级HTTP库cpp-httplib&#xff1a;从嵌入式设备到企业服务的全场景解决方案 【免费下载链接】cpp-httplib A C header-only HTTP/HTTPS server and client library 项目地址: https://gitcode.com/GitHub_Trending/cp/cpp-httplib 在现代C开发中&#xff0c;构建网络…...

编程新知 2026/3/28 7:33:18

OpenClaw技能扩展：基于nanobot开发自定义自动化模块

OpenClaw技能扩展&#xff1a;基于nanobot开发自定义自动化模块 1. 为什么选择nanobot作为技能开发基础 当我第一次尝试为OpenClaw开发自定义技能时&#xff0c;面对庞大的框架和复杂的依赖关系感到无从下手。直到发现nanobot这个轻量级解决方案&#xff0c;才真正找到了适合…...

编程新知 2026/3/28 6:52:50