拖放事件的前提是分为源对象和目标对象，你鼠标拖着的是源对象，你要放置的位置是目标对象，区分这两个对象是因为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. Mysql查看连接端口及版本

    C:\Users\Administrator>mysql -uroot -pEnter password: *****Welcome to the MySQL monitor. Commands ...

  2. cordova热更新

    cordova 热更新: 一.添加插件 1.新建Cordova项目 cordova create CordovaHotCode com.ezample.hotcode 2.添加Android平台 在新 ...

  3. Activity一共有以下四种launchMode

    1. standard: 无论什么情况都会生成一个新的Activity实例,并且放于栈顶. 2. singleTop:如果Activity纯在但是不位于栈顶,就重新生成一个Activity实例. 3. ...

  4. Java Se 基础系列(笔记) -- Exception && Array

    Exception 1.java 异常是java提供的用于处理程序中错误(指在程序运行的过程中发生的一些异常事件)的一种机制 2.java程序的执行过程中如果发生异常事件则自动生产一个异常类对象,该对 ...

  5. Java system.getproperty获取环境属性

    序号 属性 说明 1 java.version Java 运行时环境版本 2 java.vendor Java 运行时环境供应商 3 java.vendor.url Java 供应商的 URL 4 j ...

  6. EasyUi DataGrid中数据编辑方式及编辑后数据获取，校验处理

    EasyUi中的DataGrid提供前台编辑的相关函数. 实现客户选中DataGrid中一列后,对选中列中的一个字段进行编辑,并对数据进行实时校验后,传递至后台保存的需求, 主要涉及到DataGrid ...

  7. Mysql 卡死的处理办理

    使用用show processlist 命令进去数据库查 或者用phpMyAdmin查也可以 .

  8. C++ Primer 5th 第3章 字符串、向量和数组

    *****代码在Debian g++ 5.40 / clang++ 3.8(C++11)下编写调试***** 本章主要是关于字符串.数组的内容,以及一些简单的容器知识. 1.using的声明 usin ...

  9. ac automaton 专题

    hdu2222 模板题 hdu2825 在ac自动机上的状压dp hdu3247 在ac自动机上bfs poj2778 求长度为n,不包含给定的m个字符串的任何一个的字符串的个数 其实就是求长度为n的 ...

  10. delegate,notifucation,KVO三种模式实现通信的优缺点

             在开发ios应用的时候,我们会经常遇到一个常见的问题:在不过分耦合的前提下,controllers间怎么进行通信.在IOS应用不断的出现三种模式来实现这种通信: 1.委托delega ...