拖放事件的前提是分为源对象和目标对象，你鼠标拖着的是源对象，你要放置的位置是目标对象，区分这两个对象是因为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. Matlab生成二类线性可分数据

    %% 生成二类线性可分数据 function [feature, category]=generate_sample(step,error) aa=3; %斜率 bb=3; %截距 b1=1; rr ...

  2. Mysql数据库的mysql Schema 究竟有哪些东西&amp; 手工注入的基础要领

    #查看数据库版本号 mysql> select @@version; +------------+ | @@version  | +------------+ | 5.5.16-log | +- ...

  3. Java基础知识强化56：经典排序之快速排序（QuickSort）

    1. 快速排序的原理: 快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其 ...

  4. Window 10通过网线和Wifi连接树莓派

    几个月前买了个树莓派,扔在一边没有捣鼓,今天搞定了笔记本通过家里的wifi登录树莓派,下面列出设置过程. 实验环境: 网络:只有wifi 材料:笔记本一台(Win10),树莓派一台,EDUP USB无 ...

  5. Node.js中的exports与module.exports的区分

    1. module应该是require方法中,上下文中的对象 2. exports对象应该是上下文中引用module.exports的新对象 3. exports.a = xxx 会将修改更新到mod ...

  6. DataTable循环删除行

    1.如果只是想删除datatable中的一行,可以用DataRow的delete,但是必须要删除后让DataTable知道,所以就要用 到.AcceptChanges()方法,原因是这种删除只是标识性 ...

  7. php 邮件发送代码-php邮件群发

    php 邮件发送如何进行的呢? php邮件发送是通过smtp协议进行的. 下面是一个php邮件发送的类的一个函数. 文件下载 function sendmail($to, $from, $subjec ...

  8. RMQ问题

    关于RMQ的问题我就直接截取刘汝佳的<算法竞赛训练指南>上的解释了

  9. ZOJ3555 Ice Climber(dp)

    转载请注明出处: http://www.cnblogs.com/fraud/          ——by fraud Ice Climber Time Limit: 2 Seconds      Me ...

  10. Qt之信号连接，你Out了吗？

    在遇到多信号问题的时候,你是否经常会连接多个槽函数呢?如果你的答案是绝对的,那么你已经Out很久了.多信号连接多个槽,实现不同的槽就在潜意识的加大程序的开销!那么为什么不去链接同一个槽呢?     今 ...