HTML5 拖拽接口
1.首先，为了使元素可拖动，要先设置元素为可拖拽
- 方法：添加draggable属性，设置为 true
- 注意：链接和图像默认就支持拖拽，另外，如果一个元素中的文本被选中，那么这个元素和他的文本节点此时都支持被拖拽。
<body style="padding:30px;">
<div class="item">
<h3 draggable="true">我是被允许拖拽的h3元素</h3>
</div>
<div class="item">
<a href="http://www.baidu.com/">a链接</a>
</div>
<div class="item">
<img src="timg.jpg" alt="" width="200">
</div>
<div class="item">
<h3>选中文字后可被拖拽</h3>
</div>
</body>
<script>
document.ondragstart = function(){
console.log('dragstart')
}
</script>
2.拖拽事件监听
- 拖拽事件一律使用（推荐）document监听，拖拽事件分2种，一种针对的是被拖拽的元素，第二种针对被拖拽的元素经过的容器
| 事件名称 | 事件对象(e.target) | 说明 |
|---|---|---|
| ondrag | 被拖拽的元素 | 元素被拖拽期间（持续）触发 |
| ondragstart | 被拖拽的元素 | 开始拖拽元素时触发（推荐使用它记录被拖拽的元素） |
| ondragend | 被拖拽的元素 | 元素拖拽结束时触发 |
| ondragenter | 接收容器 | 被拖拽的元素进入当前容器范围内时触发此事件 |
| ondragover | 接收容器 | 被拖拽的元素停留在当前容器范围内（持续）触发此事件 |
| ondragleave | 接收容器 | 被拖拽的元素离开当前容器范围内时触发此事件 |
| ondrop | 接收容器 | 释放鼠标键时触发此事件（触发时间早于ondragend） |
- 注意：浏览器默认阻止ondrop事件，需要在ondragover事件中阻止默认事件它才能被触发
3.完整的拖拽实例
- 哪个元素被拖拽：可以在ondragstart事件中获取被拖拽的元素，并保存，问题1解决
- 哪个容器负责接收：实际操作中，拖拽结束时经过的容器就是接收的容器，而能在此时获得接收容器的事件只能是drop事件（而drop事件默认被屏蔽，所以需要在ondragover事件中释放此事件）
<script>
// 设置全局变量记录被拖拽的元素
var dragNode = null
// 监听拖拽开始，记录被拖拽的元素
document.ondragstart = function (e) {
//记录被拖拽的元素
dragNode = e.target
// 修改通明度
dragNode.style.opacity = 0.5
}
// 监听拖拽结束
document.ondragend = function (e) {
// 恢复透明度
e.target.style.opacity = 1
// 清空dragNode
dragNode = null
}
// 阻止默认事件
document.ondragover = function (e) {
//允许被拖拉的节点放入目标节点
e.preventDefault()
}
// 监听拖拽释放，获取当前容器
document.ondrop = function (e) {
// 获取释放时的容器
var targetBox = e.target
// 判断是否是目标容器
if(targetBox.matches(".box")){
// 将元素移动到新的容器中
targetBox.appendChild(dragNode)
}
}
</script>
4.优化
- 存在的问题：前面的案例中我们使用了一个全局变量来存储被拖拽的元素，但是使用全局变量容器污染全局
- 解决办法：在拖拽事件中，事件对象event有一个dataTransfer属性对象，用来保存和读取拖放相关的数据
| 方法 | 说明 |
|---|---|
| e.dataTransfer.setData(key,data) | 设置数据（只能传入数字或者字符串） |
| e.dataTransfer.getData(key) | 取数据（数字或者字符串） |
| e.dataTransfer.clearData(key) | 清空数据 |
- 代码实现：使用e.dataTransfer记录被拖拽元素的id属性值，从而通过这个值获取获取到被拖拽的元素
<script>
// 监听拖拽开始，记录被拖拽的元素
document.ondragstart = function (e) {
//判断节点是元素节点且有id属性，没有则赋予一个id
if(!e.target.id && e.target.nodeType === 1){
// 如果没有id，则设置一个id
e.target.id = "dragTest"
}
//保存id信息
e.dataTransfer.setData("id",e.target.id)
// 修改通明度
e.target.style.opacity = 0.5
}
// 监听拖拽结束
document.ondragend = function (e) {
// 恢复透明度
e.target.style.opacity = 1
}
// 阻止默认事件
document.ondragover = function (e) {
//允许被拖拉的节点放入目标节点
e.preventDefault()
}
// 监听拖拽释放，获取当前容器
document.ondrop = function (e) {
// 获取释放时的容器
var targetBox = e.target
// 根据存储的数据获取被拖拽的元素
var id = e.dataTransfer.getData("id")
var dragNode = document.querySelector("#"+id)
// 判断是否是目标容器
if(targetBox.matches(".box")){
// 将元素移动到新的容器中
targetBox.appendChild(dragNode)
}
}
</script>
HTML5 拖拽接口的更多相关文章
- 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5拖拽功能中 dataTransfer对象详解
有了HTML5,老板再也不用担心我们的上传了,再加上有拖拽上传是不是很酷.百度一下,有关HTML5拖拽上传的文章和实例不少,都缺不了一个至关重要的东东DataTransfer.但是详细介绍的不多,尤其 ...
- 基于html5拖拽api实现列表的拖拽排序
基于html5拖拽api实现列表的拖拽排序 html代码: <ul ondrop="drop_handler(event);" ondragover="dragov ...
- html5 拖拽(drag)和f放置(drop)
知识要点 HTML5 (drag&drop) API (Event) 拖放数据(对象):DataTransfer 拖放内容:setData getData 拖放效果(动作):dropEffe ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
随机推荐
- C#/.NET/.NET Core技术前沿周刊 | 第 5 期（2024年9.9-9.15）
前言 C#/.NET/.NET Core技术前沿周刊,你的每周技术指南针!记录.追踪C#/.NET/.NET Core领域.生态的每周最新.最实用.最有价值的技术文章.社区动态.优质项目和学习资源等. ...
- Winrar 免广告、去评估版的解决办法 ( 实测有效 )
事件起因: 在打开 Winrar 压缩软件的时候,总是会弹出广告弹窗,而且上面还是显示评估版本. 解决办法: 1. 正常安装 Winrar 软件 2. 安装破解软件--Restorator http: ...
- Win11本地部署FaceFusion3最强AI换脸,集成Tensorrt10.4推理加速,让甜品显卡也能发挥生产力
FaceFusion3.0.0大抵是现在最强的AI换脸项目,分享一下如何在Win11系统,基于最新的cuda12.6配合最新的cudnn9.4本地部署FaceFusion3.0.0项目,并且搭配Ten ...
- Windows平台下安装与配置MySQL9
要在Windows平台下安装MySQL,可以使用图行化的安装包.图形化的安装包提供了详细的安装向导,以便于用户一步一步地完成对MySQL的安装.本节将详细介绍使用图形化安装包安装MySQL的方法. 1 ...
- excel江湖异闻录--Klaus
最开始接触数组公式,是偶然在公众号看到"看见星光"大佬的一个提取混合文本中电话号码的公式,记得当时大佬是用vlookup解的这题,当时完全不能理解,mid中第二参数为什么是个row ...
- 如何使用hardware breakpoint
要使用内核的硬件断点(hardware breakpoint)来定位内核模块中的内存访问问题,你可以通过以下步骤进行设置和调试. 1. 确定要监控的内存地址 首先,你需要确定你想要监控的内存地址.这可 ...
- Pytorch 实现 GAN 网络
Pytorch 实现 GAN 网络 原理 GAN的基本原理其实非常简单,假设我们有两个网络,G(Generator)和D(Discriminator).它们的功能分别是: G 是一个生成网络,它接收一 ...
- 74.数组map能干什么，会改变原数组吗
map是处理数据的方法,不会改变原数组,会返回一个新数组 : filter 也不会改变原数组,会返回新数组 : forEach 也不会改变原数组,不会返回新数组 : reduce不会改变原数组 : 是 ...
- Android复习(一)基础知识
1. 现在可以使用 Kotlin.Java 和 C++ 语言编写 Android 应用 2.Android四大组件依然坚挺,这是基础并且没有改变的迹象 Activity 服务 广播接收器 内容提供程序 ...
- 云原生周刊：ingress2gateway 发布 | 2023.10.30
开源项目推荐 m9sweeper m9sweeper 是一个免费且简单的 Kubernetes 安全平台.它将行业标准的开源实用程序集成到一站式 Kubernetes 安全工具中,该工具可以帮助大多数 ...