html5拖放
1、什么是拖放（Drag 和 Drop）
拖放，字面意思就是拖动，放置
在编程里面也是如此,拖放是一种常见的特性，即抓取对象以后拖到另一个位置。
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
2、设置元素为可拖放
为了使元素可拖动，把 draggable 属性设置为 true
文本、图片和链接是默认可以拖放的，它们的draggable属性自动被设置成了true。（可以找个网页用一个图片试一下，只能拖不能放）
文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true，按住鼠标左键也可以直接拖放。
<element draggable="true | false | auto" >- true: 可以拖动
- false: 禁止拖动
- auto: 跟随浏览器定义是否可以拖动
3、拖放的过程
一切事情的过程都可以分为三种状态
开始----进行中-----结束
拖拽也是如此
| 事件 | On 型事件处理程序 | 触发时刻 |
|---|---|---|
| drag | ondrag | 当拖拽元素或选中的文本时触发。 |
| dragend | ondragend | 当拖拽操作结束时触发 (比如松开鼠标按键或敲“Esc”键). (见结束拖拽) |
| dragenter | ondragenter | 当拖拽元素或选中的文本到一个可释放目标时触发（见 指定释放目标）。 |
| dragleave | ondragleave | 当拖拽元素或选中的文本离开一个可释放目标时触发。 |
| dragover | ondragover | 当元素或选中的文本被拖到一个可释放目标上时触发（每 100 毫秒触发一次）。 |
| dragstart | ondragstart | 当用户开始拖拽一个元素或选中的文本时触发（见开始拖拽操作）。 |
| drop | ondrop | 当元素或选中的文本在可释放目标上被释放时触发（见执行释放）。 |
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、什么是拖放（Drag 和 Drop） 拖放，字面意思就是拖动，放置 在编程里面也是如此,拖放是一种常见的特性，即抓取对象以后拖到另一个位置。 在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。…...
卫导调零天线功率倒置算法原理及MATLAB仿真
卫导调零天线功率倒置算法原理及MATLAB仿真 文章目录 前言一、调零天线简介二、功率倒置自适应算法三、MATLAB仿真四、MATLAB代码总结 前言 \;\;\;\;\; 自适应调零抗干扰技术可以很大程度改善导航抗干扰性能，也是目前导航抗干扰技术中不可或缺的，其研究意…...
【划分型 DP】力扣139. 单词拆分
给你一个字符串 s 和一个字符串列表 wordDict 作为字典。如果可以利用字典中出现的一个或多个单词拼接出 s 则返回 true。 注意：不要求字典中出现的单词全部都使用，并且字典中的单词可以重复使用。 示例 1： 输入: s “leetcode”, wordDic…...
Python学习从0到1 day26 第三阶段 Spark ④ 数据输出
半山腰太挤了，你该去山顶看看 —— 24.11.10 一、输出为python对象 1.collect算子 功能: 将RDD各个分区内的数据，统一收集到Driver中，形成一个List对象 语法： rdd.collect() 返回值是一个list列表 示例： from …...
AWTK fscript 中的 JSON 扩展函数
fscript 是 AWTK 内置的脚本引擎，开发者可以在 UI XML 文件中直接嵌入 fscript 脚本，提高开发效率。本文介绍一下 fscript 中的 ** JSON 扩展函数 ** 1.json_load 加载 json 数据。 原型 json_load(str) > object json_load(binary) > object js…...
动态规划 —— dp 问题-买卖股票的最佳时机III
1. 买卖股票的最佳时机III 题目链接： 123. 买卖股票的最佳时机 III - 力扣（LeetCode）https://leetcode.cn/problems/best-time-to-buy-and-sell-stock-iii/description/ 2. 题目解析 3. 算法原理 状态表示：以某一个位置为结尾或者…...
“绽放艺术风采、激发强国力量” 海南省第十一届中小学生艺术展演活动圆满开展
2024年11月1日，由省教育厅主办、琼台师范学院承办的海南省第十一届中小学生艺术展演省级展演活动在海口正式拉开帷幕。来自全省各市县、省属学校等共计4000余名师生参加本届中小学生艺术展演现场展演活动。 本届展演活动以“绽放艺术风采、激发强国力量”为主题&…...
Linux之文件和目录类命令详解（2）
Linux之文件和目录类命令详解（2） 1、mv-移动文件或重命名2、find-查找文件和目录3、locate-快速查找文件4、du-显示目录或文件的磁盘使用情况5、df-显示文件系统的磁盘空间使用情况6、chmod-更改文件或目录的权限7、chown-更改文件或目录的拥有者8、tree…...
NVR管理平台EasyNVR多品牌NVR管理工具/设备摄像头开启ONVIF的方法
NVR小程序接入平台EasyNVR作为一款功能强大的安防视频监控平台，以其出色的兼容性和灵活性，在智慧校园、智慧工厂、智慧水利等多个场景中得到了广泛应用。本文将重点介绍如何为大华摄像头开启ONVIF协议，以便与EasyNVR进行无缝对接。 大华大部分…...
Pr 视频过渡：沉浸式视频
效果面板/视频过渡/沉浸式视频 Video Transitions/Immersive Video Adobe Premiere Pro 的视频过渡效果中，沉浸式视频 Immersive Video效果组主要用于 VR 视频剪辑之间的过渡。 自动 VR 属性 Auto VR Properties是所有 VR 视频过渡效果的通用选项。 默认勾选&#x…...
SwiftUI开发教程系列 - 第1章：简介与环境配置
1.1 SwiftUI简介 SwiftUI 是 Apple 于 2019 年推出的声明式用户界面框架，旨在简化 iOS、macOS、watchOS 和 tvOS 应用的 UI 开发。与 UIKit 的命令式编程方式不同，SwiftUI 提供了一种声明式语法，让开发者可以以更加直观、简洁的方式构建 UI。…...
gitlab ci/cd搭建及使用笔记
记录下使用gitlab的ci/cd的devops构建过程中，一些易忘点或者踩坑点： 官方文档中英文（建议英文） https://docs.gitlab.com/ee/ci/yaml/artifacts_reports.html https://gitlab.cn/docs/jh/ci/pipelines/schedules.html为什么创建了…...
Xcode 16 中 Swift Testing 的参数化（Parameterized）机制趣谈
概述 我们之前曾在 《用接地气的例子趣谈 WWDC 24 全新的 Swift Testing 入门》系列博文以及《WWDC24（Xcode 16）中全新的 Swift Testing 使用进阶》博文中较为系统地介绍了今年 WWDC 24 中全新的 Swift Testing 测试系统。 不过 Swift Testing 的本领远…...
Python自动化运维DevSecOps与安全自动化
Python自动化运维DevSecOps与安全自动化 目录 🛡️ DevSecOps概念与实践🔍 自动化安全扫描与漏洞修复🧰 基于Python的安全审计与合规性检查🐳 云平台与容器安全：基于Python的容器扫描工具⚠️ 自定义安全检测与漏洞修…...
2024下半年系统架构师考试【回忆版】
2024年11月10日，系统架构师考试如期举行，屡战屡败的参试倒是把北京的学校转了好几所。 本次考试时间 考试科目考试时间综合知识、案例分析8:30 - 12:30论文14:30 - 16:30 综合知识 1、1-1000以内包含5的数字个数 2、 案例分析 1、RESTful 对于前后…...
UE5.4 PCG 自定义PCG蓝图节点
ExecuteWithContext： PointLoopBody： 效果：点密度值与缩放成正比...
迁移学习相关基础
迁移学习 目标 将某个领域或任务上学习到的知识或模式应用到不同但相关的领域或问题中。 主要思想 从相关领域中迁移标注数据或者知识结构、完成或改进目标领域或任务的学习效果。 概述 Target data：和你的任务有直接关系的数据，但数据量少ÿ…...
华为云计算HCIE-Cloud Computing V3.0试验考试北京考场经验分享
北京试验考场 北京考场位置 1.试验考场地址 北京市海淀区北清路156号中关村环保科技示范园区M地块Q21楼 考试场选择北京，就是上面这个地址，在预约考试的时候会显示地址，另外在临近考试的时候也会给你发邮件，邮件内会提示你考试…...
数据分析——学习框架
✅作者简介：2022年博客新星 第八。热爱国学的Java后端开发者，修心和技术同步精进。 🍎个人主页：Java Fans的博客 🍊个人信条：不迁怒，不贰过。小知识，大智慧。 💞当前专栏…...
量化交易系统开发-实时行情自动化交易-3.4.2.Okex行情交易数据
19年创业做过一年的量化交易但没有成功，作为交易系统的开发人员积累了一些经验，最近想重新研究交易系统，一边整理一边写出来一些思考供大家参考，也希望跟做量化的朋友有更多的交流和合作。 接下来聊聊基于Okex交易所API获取行情数…...
pytorch实现深度神经网络DNN与卷积神经网络CNN
DNN概述 深度神经网络DNN来自人脑神经元工作的原理，通过在计算机中逻辑抽象出多个节点，接收处理并向后传递信息，实现计算机的自我学习，类比结构见下图： 该方法通过预测输出与实际值的差异不断调整节点参数࿰…...
芯片测试-LDO测试
LDO测试 💢LDO的简介💢💢压降💢💢决定压降的主要因素💢 💢LDO的分类及原理💢💢PMOS LDO💢💢PMOS LDO工作过程💢💢PMOS LDO…...
期权懂|期权新手看过来：看跌期权该如何交易？
期权小懂每日分享期权知识，帮助期权新手及时有效地掌握即市趋势与新资讯！ 期权新手看过来：看跌期权该如何交易？ 一、可以直接购买看跌期权： （1）选择预期下跌的标的资产。 （2&#…...
《深入浅出HTTPS》读书笔记（8）：密码学Hash算法的分类
密码学Hash算法有很多，比如MD5算法、SHA族类算法，MD5早已被证明是不安全的Hash算法了，目前使用最广泛的Hash算法是SHA族类算法。 1）MD5 MD5是一种比较常用的Hash算法，摘要值长度固定是128比特。 MD5算法目前被证明已…...
大语言模型安全，到底是什么的安全
什么是AI安全 自ChatGPT问世以来，市场上涌现出了众多大型语言模型和多样化的AI应用。这些应用和模型在为我们的生活带来便利的同时，也不可避免地面临着安全挑战。AI安全，即人工智能安全，涉及在人工智能系统的开发、部署和使用全过…...
论文2—《基于柔顺控制的智能神经导航手术机器人系统设计》文献阅读分析报告
论文报告：基于卷积神经网络的手术机器人控制系统设计 摘要 本研究针对机器人辅助微创手术中定向障碍和缺乏导航信息的问题，设计了一种智能控制导航手术机器人系统。该系统采用可靠和安全的定位技术、7自由度机械臂以及避免关节角度限制的逆运动学控制策…...
试编写算法将单链表就地逆置(默认是带头节 点，如果是不带头节点地逆置呢?)
编写一个算法来就地逆置一个单链表。默认情况下，链表是带头节点的，但如果链表不带头节点，逆置的过程会有所不同。 第一步：定义逆置函数 根据题目中的“试编写算法将单链表就地逆置”，我们需要： 定义一个…...
FPGA学习笔记#3 Vitis HLS编程规范、数据类型、基本运算
本笔记根据笔者目前的项目确定学习目标，目前主要集中在Vitis HLS上，使用的Vitis HLS版本为2022.2，在windows11下运行，仿真part为xcku15p_CIV-ffva1156-2LV-e，从这一篇开始是HLS的学习进度，主要根据教程&…...
爬虫 - 二手交易电商平台数据采集 (一)
背景: 近期有一个需求需要采集某电商网站平台的商品数据进行分析。因此，我计划先用Python实现一个简单的版本，以快速测试技术的实现可能性，再用PHP实现一个更完整的版本。文章中涉及的技术仅为学习和测试用途，请勿用于商业或非法用…...
“成交量分布指标“，通过筹码精准锁定价格方向+简单找市场支撑压力位 MT4免费公式！
指标名称：成交量分布指标 版本：MT4 ver. 1.32 之前发布的市场分布图不少朋友反馈不错，希望获得其它版本。 这个版本只有MT4的，MT5可以看之前版本，链接： “市场分布图”，精准把握价格动向 更直…...
个人网站名/国内新闻最新
1.拉取时报错：Permission denied (publickey) 先检查一下你的乌龟设置是否用的不是乌龟自己的SSH 2.TortoiseGit报错： Couldn’t load this key(unable to open file) 重新设置密钥路径 参考文献： 1.http://blog.csdn.net/u012195214 2…...
wordpress商务套餐/百度地图下载2022新版安装
采用Little-endian模式的CPU对操作数的存放方式是 从低字节到高字节，而Big-endian模式对操作数的存放方式是从高字节到低字节。例如，16bit宽的数0x1234在Little-endian 模式CPU内存中的存放方式（假设从地址0x4000开始存放）为&…...
网上开店怎么注册/郑州seo技术博客
我们在使用 virt-install 构建虚拟机需要指定操作系统类型, 在配置之前, 我们需要了解到底有哪些可选值, 查阅了下, 可以使用 osinfo-query 来完成.这里我们使用到了两个命令, 需要安装 virt-install 和 osinfo-query安装 virt-installREHL/CentOSyum -y install virt-installD…...
做艺术品拍卖的网站/百度免费网站制作
通过对红绿蓝三个Slider控件的赋值来综合起来三种颜色调试出来大面板的颜色。 xaml <!--LayoutRoot contains the root grid where all other page content is placed--><Grid x:Name"LayoutRoot"Background"Transparent"><Grid.RowDefinit…...
做电商哪几个设计网站比较好/百度推广账号登录
原文地址为： thinkphp无法加载模块解决办法前台入口文件index.php <?php//前台入口define(THINKPHP_PATH, ../ThinkPHP/);//底层的位置define(APP_PATH, ./home/);//定义项目位置define(APP_DEBUG, true);//定义DEBUG开关require_once THINKPHP_PATH.ThinkPHP.p…...
手机网站设计论文/小说排行榜2020前十名
一个调试器应该可以跟踪被调试程序执行到了什么地方，显示下一条将要执行的语句，显示各个变量的值，设置断点，进行单步执行等等，这些功能都需要一个基础设施的支持，那就是调试符号。 什么是调试符号 我们知道…...