HTML5拖拽事件笔记
在HTML5的规范中，我们可以通过为元素增加`draggable="true"`来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启的。
1. 拖拽元素：设置了`draggable="true"`的元素
当拖动某元素时，将依次触发下列事件：
1. dragstart（按下鼠标并开始移动鼠标时，会在被拖放的元素上触发dragstart事件）
2. drag（触发dragstart事件后，随即会触发drag时间，而且在元素被拖动器件会持续触发该事件）
3. dragend（当拖动停止时，无论是否把元素放到了有效的放置目标上，会触发dragend事件）
2. 目标元素：页面中的任何一个元素都可以成为目标元素
当某个元素倍拖动到一个有效的目标上时，下列事件会依次发生：
1. dragenter（只要有元素倍拖放到目标上，就会触发dragenter事件）
2. dragover（dragenter被触发后紧接着触发dragover事件，在被拖动目标一直在目标范围内时，dragover事件会持续被触发）
3. dragleave或drop（如果元素被拖出了放置目标，dragover事件不再触发，但会触发dragleave事件；如果元素被放到了目标元素中，则触发drop事件而不是dragleave事件）
3. 自定义目标元素
虽然所有的元素都支持放置目标事件，但是这些元素默认是不允许放置的。如果拖动元素经过不允许放置的元素，无论永辉如何操作，都不会触发drop事件。
如果需要设置允许放置，我们必须阻止对元素的默认处理方式：
这要通过调用 dragover 事件的 event.preventDefault() 方法来阻止默认事件发生，即改变目标元素不允许放置属性，这时，当元素在目标元素上被鼠标释放时，就会触发drop事件。
HTML5拖拽事件笔记的更多相关文章
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5 拖拽事件
dragstart:拖拽开始 drag: 拖拽中,会不停的触发 dragend:拖拽结束 ondraglevea:有元素离开了本元素 ondragenter:有元素进入了本元素 ondragover: ...
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...
- HTML5深入学习之鼠标跟随，拖拽事件
知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover: 当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...
- Html5拖拽复制
拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖拽是标准的一部分,任何元素都能够拖拽. Html5拖拽非常常见的一个功能,但是大部分拖拽的案例都是一个剪切的过程, 项目中需 ...
- html5拖拽
html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- HTML5 拖拽实现
简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...
- Html5 拖拽行为和AngularJs的结合
一. Html5的拖拽行为 1.设置元素为可拖放:把draggable属性设置为true. example: <div id="drag1" draggable=" ...
随机推荐
- 通读SDWebImage①--总体梳理、下载和缓存
本文目录 下载操作SDWebImageDownloaderOptions和下载过程实现 下载管理SDWebImageDownloader 缓存SDImageCache SDWebImageManage ...
- ubuntu安装Lua
1.网站下载LUA包 curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz 2.下载ubuntu的编译支持sudo apt-get install bu ...
- PHP的SQL注入攻击的技术实现以及预防措施
最近在折腾 PHP + MYSQL 的编程.了解了一些 PHP SQL 注入攻击的知识,总结一下经验.在我看来,引发 SQL 注入攻击的主要原因,是因为以下两点原因: 1. php 配置文件 php. ...
- DFS/BFS+思维 HDOJ 5325 Crazy Bobo
题目传送门 /* 题意:给一个树,节点上有权值,问最多能找出多少个点满足在树上是连通的并且按照权值排序后相邻的点 在树上的路径权值都小于这两个点 DFS/BFS+思维:按照权值的大小,从小的到大的连有 ...
- Database File Management ->> Shrink Data File
今天在开发环境遇到了一个问题,我们发现服务器上的硬盘空间满了,查看了下发现这个盘存放的数据库文件应该是来源一个并非很大的库才对.检查之后发现这个数据库下的某个数据文件占了盘符下70%的空间,而大部分数 ...
- WebView混合开发
现在开发APP的方式变化,不在是传统的APP开发了,有很多的APP慢慢的转向混合模式的开发,使用WebView是传统开发模式转向混合模式的桥梁工具,结合了很多的Web前端开发界面,使得开发的速度加快, ...
- HttpURLConnection碰到连续302跳转的问题的原因及解决方法
用HttpURLConnection联网的代码: HttpURLConnection conn = null; URL url = new URL("http://10.0.0. ...
- bzoj 3126 单调队列优化dp
能转移的最左是其左边完整区间的最右左端点,最右是能覆盖它的最左左端点-1 #pragma GCC optimize ("O3") #include<cstdio> #i ...
- Java实现post和get请求
GET请求:GET请求会向服务器发索取数据的请求,从而来获取信息,该请求就像数据库的select操作一样,只是用来查询一下数据,不会修改.增加数据,不会影响资源的内容,即该请求不会产生副作用.无论进行 ...
- EF的CodeFirst模式自动迁移（适用于开发环境）
EF的CodeFirst模式自动迁移(适用于开发环境) 1.开启EF数据迁移功能 NuGet包管理器------>程序包管理控制台---------->Enable-Migrations ...