dragstart:拖拽开始

drag: 拖拽中,会不停的触发

dragend:拖拽结束

ondraglevea:有元素离开了本元素

ondragenter:有元素进入了本元素

ondragover:有元素进入了本元素,会不停的触发

drop:有元素进入了本元素,在本元素内停止拖拽,然后触发(需要将本元素和拖拽元素的ondragover事件屏蔽,e.preventDefault();)

测试代码:

var boxDom = document.getElementById("box");
boxDom.addEventListener("dragstart",function(){
console.log("1开始拖拽了")
},false);

  

HTML5 拖拽事件的更多相关文章

  1. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. HTML5拖拽事件笔记

    在HTML5的规范中,我们可以通过为元素增加`draggable="true"`来设置此元素是否可以进行拖拽操作,其中图片.链接默认是开启的. 1. 拖拽元素:设置了`dragga ...

  3. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  4. HTML5深入学习之鼠标跟随,拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  5. html5拖拽

    html5拖拽一 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  6. 每天一个JavaScript实例-html5拖拽

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  7. HTML5 拖拽实现

    简介: 最早在网页中引入JavaScript拖放功能是IE4.当时,网页中只有两种对象可以拖放:图像和某些文本.拖放图像时,把鼠标放到图像上,按住鼠标不放就可以拖放它.拖放文本时,要先选中文本,然后可 ...

  8. Html5 拖拽行为和AngularJs的结合

    一. Html5的拖拽行为 1.设置元素为可拖放:把draggable属性设置为true. example: <div id="drag1" draggable=" ...

  9. HTML5拖拽——将本地文件拖拽到网页中显示

    HTML5标准中的提供的用于文件输入输出(I/O)的对象 File: 代表一个文件对象 FileList: 代表一个文件列表,类数组对象 FileReader 用于从文件中提取内容 FileWrite ...

随机推荐

  1. 腾讯云,搭建 FTP 文件服务

    腾讯云,搭建 FTP 文件服务 腾讯云,搭建 FTP 文件服务 安装并启动 FTP 服务 任务时间:5min ~ 10min 安装 VSFTPD 使用 yum 安装 vsftpd: yum insta ...

  2. linux备忘录-程序管理与SELinux

    知识点 程序与程序(Process and Program) 通过执行一条指令或程序,则可以触发一个事件,并获得一个PID.当我们需要启动一个程序时,我们是启动一个二进制文件(binary file) ...

  3. chrome谷歌浏览器导致的密码被修改现象

    版本 68.0.3440.106(正式版本) (32 位)记住密码功能有个缺陷,会把自己的密码自动填写到别人的密码框中,假如这个时候点击保存密码,就会导致其他用户的密码被修改为登录用户的密码.   很 ...

  4. [android]不解锁刷机

    本人因为误操作进入andriod recovery模式,显示failed to boot 2,致手机无法恢复出厂值, 当时那叫一个郁闷.上论坛搜寻无数,唉让刷底包的无数(在此不解释),万恶的刷底包. ...

  5. User Agent的学习

    什么是User-Agent? User-Agent是一个特殊字符串头,被广泛用来标示浏览器客户端的信息,使得服务器能识别客户机使用的操作系统和版本,CPU类型,浏览器及版本,浏览器的渲染引擎,浏览器语 ...

  6. lintcode-95-验证二叉查找树

    95-验证二叉查找树 给定一个二叉树,判断它是否是合法的二叉查找树(BST) 一棵BST定义为: 节点的左子树中的值要严格小于该节点的值. 节点的右子树中的值要严格大于该节点的值. 左右子树也必须是二 ...

  7. win7 C/C++,QT安装环境总结

    1. 安装VMware,但是不能用,发现是权限问题,解决方式:使用管理员运行模式即可: 2. 安装win7 ultimate x64,找了半天找不到密钥,只要用激活软件,目前来说系统可用 3. 安装 ...

  8. Access-Control-Allow-Methods: OPTIONS & CORS

    Access-Control-Allow-Methods: OPTIONS CORS https://stackoverflow.com/questions/20478312/default-valu ...

  9. 【bzoj1999】[Noip2007]Core树网的核 树的直径+双指针法+单调队列

    题目描述 给出一棵树,定义一个点到一条路径的距离为这个点到这条路径上所有点的距离的最小值.求一条长度不超过s的路径,使得所有点到这条路径的距离的最大值最小. 输入 包含n行: 第1行,两个正整数n和s ...

  10. 【BZOJ 2753 滑雪与时间胶囊】

    Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 2843  Solved: 993[Submit][Status][Discuss] Descripti ...