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. android多点触控自由对图片缩放

    在系统的相册中,观看相片就可以用多个手指进行缩放. 要实现这个功能,只需要这几步: 1.新建项目,在项目中新建一个ZoomImage.java public class ZoomImageView e ...

  2. lintcode-79-最长公共子串

    79-最长公共子串 给出两个字符串,找到最长公共子串,并返回其长度. 注意事项 子串的字符应该连续的出现在原字符串中,这与子序列有所不同. 样例 给出A="ABCD",B=&quo ...

  3. vue2.0介绍

    1.vue.js 是什么 vue(view)是一套构建用户界面的渐进式框架 Vue (pronounced /vjuː/, like view) is a progressive framework  ...

  4. Hibernate关联映射之_一对一

    数据库模型 一般对一对一的关系而言,会存在一个主从关系.如 人 与 身份证,就是一个一对一关系, 人 是主,身份证 是从 Person PK:id name age Id_Card PK.FK:id ...

  5. C#范型实例化对象

    T s = System.Activator.CreateInstance<T>();

  6. 洛谷P4592 [TJOI2018]异或 【可持久化trie树】

    题目链接 BZOJ4592 题解 可持久化trie树裸题 写完就A了 #include<algorithm> #include<iostream> #include<cs ...

  7. BZOJ_day4&&DSFZ_day1

    昨天坐火车才水了三道题... 25题 100810221041105110591087108811791191119212571303143218541876195119682140224224382 ...

  8. myisam_sort_buffer_size vs sort_buffer_size

    Q: I am MySQL on server with 6GB RAM. I need to know what is the difference between myisam_sort_buff ...

  9. Educational Codeforces Round 55 (Rated for Div. 2):C. Multi-Subject Competition

    C. Multi-Subject Competition 题目链接:https://codeforces.com/contest/1082/problem/C 题意: 给出n个信息,每个信息包含专业编 ...

  10. 使用e.target.dataset的问题

    在微信开发中我们经常会用到标签中属性的属性值,有时候我们通过 data-* 和 e.target.dateset 来获取属性值会出现一点小bug,即是调用出来的数据是undefined. 1)方案1– ...