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. truffle的调用nodeJs的问题

    Truffle3.0集成NodeJS并完全跑通(附详细实例,可能的错误) 升级到Truffle3.0 如果之前安装的是Truffle2.0版本,需要主动升级到Truffle3.0,两者的语法变化有点大 ...

  2. 关于iframe的使用 以及自适应页面高度

    1. <a href="port" target="frame_view">港口资料</a> <iframe id="e ...

  3. BZOJ 2333 SCOI2011 棘手的操作 并查集+可并堆

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2333 ..题意概述就不写了,各位老爷如果是看着玩的可以去搜一下,如果是做题找来的也知道题干 ...

  4. 一个简单的NetCore项目:1 - 搭建框架,生成数据库

    1- 启动项目 安装.NETCORE SDK,教程在网上可以搜索的到,这里就不讲述了.简单粗暴的方式就是安装最新的VS2015. 2-搭建框架 2.1 打开VS新建一个项目,在弹出的新建项目对话框中, ...

  5. 创建带maven的javaWeb项目

    1File——Maven——maven-archtypes-webapp GroupId:表示项目组织唯一标识符 ArtifacrId:表示项目唯一标识符 例如项目名称 Version是项目版本 这三 ...

  6. OpenCV彩色图像转灰度图

    核心函数cvSplit(). #include<cv.h> #include<highgui.h> int main(int argc, char** argv) { IplI ...

  7. Oracle锁表查询以及解锁

    一.查看锁表进程SQL语句 select sess.sid, sess.serial#, lo.oracle_username, lo.os_user_name, ao.object_name, lo ...

  8. [Leetcode] 20. Valid Parentheses(Stack)

    括号匹配问题,使用栈的特点,匹配则出栈,否则入栈,最后栈为空则全部匹配.代码如下: class Solution { public: bool isValid(string s) { stack< ...

  9. 【bzoj3196】Tyvj 1730 二逼平衡树 线段树套Treap

    题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:1.查询k在区间内的排名2.查询区间内排名为k的值3.修改某一位值上的数值4.查询k在区间内的前驱(前驱定义 ...

  10. hdu6103 Kirinriki(trick+字符串)

    题解: 考虑一开始时,左边从1开始枚举,右边从n开始枚举 我们可以得到一个最大的值k. 但是如果这样依次枚举,复杂度肯定是n^3,是不行的 考虑如何利用上一次的结果,如果我们把1和n同时去掉 就可以利 ...