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 ...
随机推荐
- ASP.NET Core Library – Nager.PublicSuffix
前言 有个很简单的需求,想从 URL 里获取到 domain 不要 subdomain. abc.example.com -> example.com 没想到就这么简单的需求,超级难做.而且 . ...
- Vue 3.3.11 迁移指南
https://v3-migration.vuejs.org/zh/ 用于迁移的构建版本 @vue/compat (即"迁移构建版本") 是一个 Vue 3 的构建版本,提供了可配 ...
- BOOT跳转APP，STM32F4正常，但是GD32F4起不来的问题
问题描述: stm32F4可以正常从BOOT跳转执行APP,到了GD32F4,卡死在APP程序的这里. 临时解决办法: APP程序内 把这两句代码都屏蔽掉就好了. 相关资料搜索: 最佳解决方案: ...
- （九）Redis 哨兵机制与集群
主从复制中,如果从库发生故障了,客户端可以继续向主库或其他从库发送请求,但是如果主库发生故障了肿么办呢?读请求,那还可以由从库继续提供服务,写请求就么得办法了.此时,哨兵机制就登场了,解决3个问题: ...
- Android Qcom USB Driver学习(八)
因为要看usb charging的问题,所以需要补充一下battery的相关知识,算是入门吧 BAT SCH (1)VBATT_VSNS_P (2)BAT_THERM (3)I2C_SDA (4)I2 ...
- 利用 ACME 实现SSL证书自动化配置更新
最近收到腾讯云的通知SSL证书要到期了,本想直接申请的发现现在申请的免费SSL证书有效期只有90天了,顺便了解了一下原因是包括Google在内的国际顶级科技公司一直都有在推进免费证书90天有效期的建议 ...
- spring cloud openfeign 源码
一.读取注解信息 入口 1 import org.springframework.boot.SpringApplication; 2 import org.springframework.boot.a ...
- Oracle ASM 常用巡检脚本
1.查看磁盘组 sqlplus "/ as sysasm" set line 200 set pagesize 200 select group_number,name,state ...
- SpringBoot 2.3 升级到 SpringBoot 2.7 爬坑-- SpringDoc & Swagger
目录 POM yml 配置自定义的 OpenAPI 规范 拦截器去除 swagger 的接口验证 模型 Controller 配置 常用注解 注意:Swagger支持SpringBoot2.0但不支持 ...
- Games101 基于蒙特卡洛积分的光线路径追踪 作业7 框架解读
目录 1 前言 2 辐射度量学 3 Coding Pseudo Code 3.1 uniform random point in triangle in 3D 3.2 Multithreading 3 ...