拖放事件的前提是分为源对象和目标对象，你鼠标拖着的是源对象，你要放置的位置是目标对象，区分这两个对象是因为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. [置顶] SQL注入问题

    我们做系统,有没有想过,自己的容量很大的一个数据库就被很轻易的进入,并删除,是不是很恐怖的一件事.这就是sql注入. 一.SQL注入的概念         SQL注入攻击指的是通过构建特殊的输入作为参 ...

  2. java总结文章

    java总结文章 原创地址: http://www.cnblogs.com/Alandre/ (泥沙砖瓦浆木匠),须要转载的,保留下! Thanks Talk is cheap. Show me th ...

  3. sqlserver，执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决)

    sqlserver,执行生成脚本时“引发类型为“System.OutOfMemoryException”的异常”(已解决) 出现此错误主要是因为.sql的脚本文件过大(一般都超过100M)造成内存无法 ...

  4. Android 使用新浪微博SSO授权

    新浪微博SSO授权,很早就做好了,只是一直没有时间整理博客,今天加班,晚上闲暇之时便想到整理一下.由于整个七月份很忙,加班很多.前段时间把腾讯微博的SSO认证整理好了.想在七月份翻篇之前再写点东西.好 ...

  5. $_SERVER变量 以及 PHP 使用 $_SERVER['PHP_SELF'] 获取当前页面地址及其安全性问题

    PHP $_SERVER['PHP_SELF'] $_SERVER['PHP_SELF'] 表示当前 php 文件相对于网站根目录的位置地址,与 document root 相关. 假设我们有如下网址 ...

  6. passwd-shadow文件

    [root@rusky /]# vi /etc/passwd root:x:::Redhat5:/root:/bin/bash rusky:x::::/home/rusky:/bin/bash 1.r ...

  7. MacOS U盘安装

    通过Mac上的App Store下载安装程序 插入U盘 启动终端 输入命令  sudo /Applications/Install\ OS\ X\ El\ Capitan.app/Contents/R ...

  8. tmux environment keep

    Shell 下 tmux 不能保持 PATH 变量,解决方法如下: 添加如下配置信息到 ~/.tmux.conf 中即可. set-option -ga update-environment PATH ...

  9. javascript 识别移动端设备

    看到一种比较简单的方法,于是就把它记录下来备用吧.最近离职了,房子换了,还有...真是一把心酸,我知道谁活着都不容易,自己也资格把自己的苦水吐给别人,因为别人也过得不容易,所以大多不快都只能闷着,大家 ...

  10. .net抓取网页数据

    1.想通过代码获得某个页面的数据,首先根据右键查看页面源代码,通过分析.再通过下面代码,修改,一步步查找出所需内容,存入数据库. //根据Url地址得到网页的html源码 private string ...