拖放事件的前提是分为源对象和目标对象，你鼠标拖着的是源对象，你要放置的位置是目标对象，区分这两个对象是因为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. spring技术翻译开始

    从今天开始,我会坚持每天花费两个小时来翻译一本英文书(当然自己觉得绝对算得上是经典),可能我英文水平有限,但也请路过的高人予以指点. 如果有翻译的出入很大,望各位告知,本人一定更改.决定翻译的目的有两 ...

  2. Append加载动态轮播

    前几天遇到了些小麻烦,不过很快就解决了.之所以要记下来是因为作为一名前端的程序员,要理解页面的加载顺序是最重要的.要不然自己写程序意外的出现bug~~ 刚开始写利用Append的时候,利用火狐的fir ...

  3. Dialog( 对话框) 组件

    一． 加载方式//class 加载方式<div class="easyui-dialog" title="My Dialog"style="wi ...

  4. Css的三大机制（特性）：特殊性、继承、层叠详解

    继承(Inheritance)是从一个元素向其后代元素传递属性值所采用的机制.确定应当向一个元素应用那些值时,用户代理(浏览器)不仅要考虑继承,还要考虑声明的特殊性(specificity),另外需要 ...

  5. 《Spring敲门砖之基础教程第一季》 第一章 概要介绍

    百度百科say: Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod Johnson创建.简单来说,Spring是一个分层的JavaSE/EEful ...

  6. HibernateTemplate常用方法总结

    HibernateTemplate常用方法 (本文章内容相当于转载自:http://www.tuicool.com/articles/fU7FV3,只是整理了一下内容结构和修改了部分内容,方便阅读) ...

  7. C++，关于类和结构体中，成员访问属性(public,private)

    今天发现一个的问题: #include <vector> #include <iostream> #include <algorithm> #include < ...

  8. ZOJ3555 Ice Climber(dp)

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

  9. nginx_http核心模块(二)

    对一些常用的配置项做一些解释:详细请看官方文档:http://nginx.org/en/docs/http/ngx_http_core_module.html 1. alias Syntax: ali ...

  10. ImageNet && 医学图像的识别

    医学图像识别的问题 如果将CNN应用于医学图像,首要面对的问题是训练数据的缺乏.因为CNN的训练数据都需要有类别标号,这通常需要专家来手工标记.要是标记像ImageNet这样大规模的上百万张的训练图像 ...