拖放事件的前提是分为源对象和目标对象，你鼠标拖着的是源对象，你要放置的位置是目标对象，区分这两个对象是因为HTML5的拖放事件对两者是不同的。

被拖动的源对象可以触发的事件：

1).ondragstart:源对象开始被拖动

2).ondrag:源对象被拖动过程中（鼠标可能移动也可能不移动）

3).ondragend:源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件：

1).ondragenter:目标对象被源对象拖动着进入

2).ondragover:目标对象被源对象拖动着悬停在上方

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手

注意：1.必须阻止dragover事件的默认行为e.preventDefault，才可能触发drop事件！　

 box.ondragover = function(e){
 e.preventDefault(); //使得drop事件可以触发
     }
 box.ondrop = function(e){
     do something...
     }

 2.要使用jQuery的话，一定要记住e不是原始的event事件，而是jQuery的事件，这时候需要使用e.originalEvent.dataTransfer

拓展：HTML5新增的文件操作对象

File：代表一个文件对象|”

FileList:代表一个文件列表对象，类数组

FileReader:从文件中读取数据

FileWriter：向文件中写入数据

　　　　

有了文件操作对象，可以直接拖动客户端文件到服务器下载的页面中。

div.ondrop=function(e){
    var f=e.dataTransfer.files[0];//文件对象 File
    varfr=new FileReader();//从文件对象中读取数据
    fr.readAsDataURL(f);//从文件中读取URL数据
        fr.onload=function(){
        img.src=fr.result;
        }
}

完整代码如下：

 //例：用户拖动图片到服务器上
 <!DOCTYPE html>
 <html>
 <head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
     #container {
         border: 1px solid #aaa;
         border-radius: 3px;
         padding: 10px;
         margin: 10px;
         min-height: 400px;
     }
 </style>
 </head>
 <body>
     <h1>拖放API的扩展知识</h1>
     <h3>请拖动您的照片到下方方框区域</h3>
     <div id="container">

     </div>

     <script>
         //监听document的drop事件——取消其默认行为：在新窗口中打开图片
        document.ondragover = function(e){
             e.preventDefault(); //使得drop事件可以触发
         }
         document.ondrop = function(e){
             e.preventDefault(); //阻止在新窗口中打开图片
         }

         //监听div#container的drop事件，设法读取到释放的图片数据，显示出来
         container.ondragover = function(e){
             e.preventDefault();
         }
         container.ondrop = function(e){
           console.log('客户端拖动着一张图片释放了...')
           //当前的目标对象读取拖放源对象存储的数据
           //console.log(e.dataTransfer); //显示有问题
           //console.log(e.dataTransfer.files.length); //拖进来的图片的数量
             var f0 = e.dataTransfer.files[0];
           //console.log(f0); //文件对象 File

           //从文件对象中读取数据
         var fr = new FileReader();
           //fr.readAsText(f0); //从文件中读取文本字符串
         fr.readAsDataURL(f0); //从文件中读取URL数据
         fr.onload = function(){
         console.log('读取文件完成')
         console.log(fr.result);
         varimg = new Image();
         img.src = fr.result; //URL数据
         container.appendChild(img);
       }
     }

     </script>
 </body>
 </html>

drag

HTML5新增的一些属性和功能之六——拖拽事件的更多相关文章

  1. HTML5新增的一些属性和功能之一

    大致可以分为10个方面: HTML5表单元素和属性 表单2.0 视音频处理 canvas绘图 SVG绘图 地理定位 拖放技术 web work web storage web socket 一.新的i ...

  2. HTML5新增的一些属性和功能之八——web Worker

    Web Workers 为什么用web workers? 浏览器的原理中决定了页面打开只有一个主线程--UI渲染线程,如果线程中有耗时的程序(js)会阻塞线程,使得页面中其他的UI无法渲染,我们一般把 ...

  3. HTML5新增的form属性简介——张鑫旭

    一.引言 HTML5中新增了一个名为form的属性,是一个与处理表单相关的元素. 在HTML4或XHTML中,我们要提交一个表单,必须把相关的控件元素都放在<form>元素下.因为表单提交 ...

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

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

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

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

  6. HTML5深入学习之鼠标跟随，拖拽事件

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

  7. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  8. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  9. html5新增及废除属性

    html5中,在新增加和废除很多元素的同时,也增加和废除了很多属性. 一.新增属性 1.表单属性 a.autofocus 对input[所有类型].select.textarea与button指定au ...

随机推荐

  1. Linux下配置免安装版Tomcat

    一.下载免安装版Tomcat 打开Tomcat主页http://tomcat.apache.org/,下载Tomcat免安装版,我这里下载的是apache-tomcat-7.0.2.tar.gz. 二 ...

  2. monkeyrunner总结

    device=MonkeyRunner.waitForConnection()   //手机连接 result = device.takeSnapshot()    //截图 result.write ...

  3. repo简介

    高通的Android JellyBean库已经建立完成,目前已经可以正常访问,可以正常提交.Repo获取代码注意:1. 首先应有一个repo脚本,并将脚本放到环境变量里,此脚本的配置方法a) 进入用户 ...

  4. 用GDB调试多进程程序

    在子进程中sleep.然后attach上去. gdb --pid=123456 ps出子进程的id,gdb attach 进程号. http://www.ibm.com/developerworks/ ...

  5. Sybase datetime 时间转换格式 convert(varchar(10),字段名,转换格式)

    convert(varchar(10),字段名,转换格式)sybase下convert函数第三个参数(时间格式)比如:1.select user_id,convert(varchar(10),dayt ...

  6. linux 常用find命令

    1.查找当前目录下以test开头的所有文件-会进入子目录中去查找 [root@rusky hgfs]# find -name test* 2.查找当前目录下名为test.txt的文件-会进入子目录中去 ...

  7. Spring 详解第一天

    spring 框架简述: http://www.cnblogs.com/ToBeAProgrammer/p/5230065.html http://www.cnblogs.com/ToBeAProgr ...

  8. JCo 指南

    http://blog.csdn.net/asdfak/article/details/5834731 JAVA 调用SAP端接口 Java Connector and BAPI 前些日子想去深入的研 ...

  9. ST表入门学习poj3264 hdu5443 hdu5289 codeforces round #361 div2D

    ST算法介绍:[转自http://blog.csdn.net/insistgogo/article/details/9929103] 作用:ST算法是用来求解给定区间RMQ的最值,本文以最小值为例 方 ...

  10. C# 获取计算机 信息

    /// <summary> /// 获取本机 机器名 /// </summary> /// <returns></returns> public sta ...