要想在html5中实现元素的拖放，被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素，该元素是目标元素；这两个元素在拖放过程中都会触发不同的事件，处理好这些事件才可以完成漂亮的拖放。

被拖放元素触发的事件有：

  • ondragstart:该事件在鼠标按住元素开始拖动时触发。
  • ondragend:该事件在鼠标抬起时触发。
  • ondrag:该事件在dragstart和dragend之间连续触发（即使鼠标不移动）。

目标元素触发的事件有：

  • ondragenter:该事件在被拖放元素进入到目标元素时触发。
  • ondragleave:该事件在被拖放元素离开目标元素时触发。
  • ondragover:该事件在被拖放元素进入enter目标元素之后离开leave目标元素之前触发。
  • ondrop:该事件在被拖放元素进入目标元素后并抬起鼠标时触发，但是直接不会触发，而必须在阻止了ondragover的默认事件的情况下才能触发。

注意：上述属性和事件只能实现元素的拖拽，不能真正的把元素放在另一个元素里；另外即使完成了上述内容，在火狐下依然不能实现拖拽。

在火狐下使用html5实现元拖放：

  • 很简单，只要在ondragstart事件处理函数中，设置event.dataTransfer.setData(key,value);就可以了，参数key和value必须是字符串。
  • 其次，dataTransfer的属性setDragImage(oEle,x,y);可以设置拖拽时的阴影是哪个元素。
  • 最后，基本上无卵用的属性effectAllowed属性可以来设置鼠标进入目标元素后的样式。

除了页面元素的拖放外，现实中很多情况是本地文件的拖放上传，如邮箱上传附件，此时dataTransfer的强大功能就显现出来了：

  • dataTransfer的files属性是一个fileList类型的对象，它是一个类数组对象，在ondrop事件中可以获取，它的作用就是保存拖拽上来的文件。
  • 虽然files保存了文件，但是却不能将文件直接上传到服务器，此时我们就要认识一个新朋友：FileReader，这个对象的readAsDataUrl(files[i])方法可以将files中保存的文件读取为二进制形式的字符串，然后再让我们的好朋友ajax将此字符串上传给服务器就可以啦~

来个简单的小练习，外部图片拖拽到网页，显示图片：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文件拖放（仅限图片）</title>
<style>
#box { width:300px; height:300px; background:#39C; margin:100px; line-height:300px; text-align:center;}
</style>
<script>
window.onload = function(){
    var oDiv = document.getElementById('box');
    var oUl = document.getElementById('list');
    oDiv.ondragenter = function(){
        this.innerHTML = '可以松手了~';
    }
    oDiv.ondragleave = function(){
        this.innerHTML = '请将文件拖放到这个区域~';
    }
    oDiv.ondragover = function(ev){
        ev = ev || window.event;
        ev.preventDefault();
    }
    oDiv.ondrop = function(ev){
        ev = ev || window.event;
        ev.preventDefault();
        this.innerHTML = '请将文件拖放到这个区域~';    

        var files = ev.dataTransfer.files;

        for(var i=0;i<files.length;i++){
            if(files[i].type.indexOf('image')==-1){        //不是图片文件就跳过
                continue;
            }
            var fd = new FileReader();    //每次循环都要新建一个reader
            fd.readAsDataURL(files[i]);
            fd.onload = function(){
                var oLi = document.createElement('li');
                var oImg = document.createElement('img');
                oImg.src = this.result;
                oLi.appendChild(oImg);
                oUl.appendChild(oLi);
            }
        }

    }
}

</script>
</head>
<body>
    <div id="box">请将文件拖放到这个区域~</div>
    <ul id="list"></ul>
</body>
</html>

HTML5自学笔记[ 9 ]HTML5实现元素的拖放的更多相关文章

  1. html5学习笔记(3)--主题结构元素-1

    Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta char ...

  2. [html5] 学习笔记-改良的input元素种类

    在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...

  3. [html5] 学习笔记-表单新增元素与属性

    本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...

  4. Html5 自学笔记

      1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...

  5. HTML5自学笔记[ 11 ]canvas绘图基础1

    html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...

  6. HTML5自学笔记[ 10 ]简单的购物车拖拽

    用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...

  7. HTML5自学笔记[ 18 ]canvas绘图基础5

    获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息, ...

  8. HTML5自学笔记[ 17 ]canvas绘图基础4

    绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...

  9. HTML5自学笔记[ 4 ]js中新增的选择器方法

    querySelector():参数与jQuery一样,这个方法获取一组元素中的第一个元素. querySelectorAll():获取一组元素. getElementsByClassName():获 ...

随机推荐

  1. 我的android学习经历26

    ViewPager的使用 ViewPager就想微信或者qq的顶部的导航栏一样,滑动可以改变到不同的View或者Fragment 使用方法: 在布局文件中定义标签: android.support.v ...

  2. Spark学习（一）--RDD操作

    标签(空格分隔): 学习笔记 Spark编程模型的两种抽象:RDD(Resilient Distributed Dataset)和两种共享变量(支持并行计算的广播变量和累加器). RDD RDD是一种 ...

  3. can not find UIAutomationClient

    'ClientApp.vshost.exe' (CLR v4.0.30319: ClientApp.vshost.exe): Loaded 'C:\Windows\Microsoft.Net\asse ...

  4. [HDOJ5726]GCD（RMQ，二分）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5726 题意:给定数列,求区间[L,R]的GCD的值,并求出有多少个子区间满足和[L,R]的GCD相等. ...

  5. LINUX DIFF命令详解

    刚才在和公司做离线IP对比,最后手工了,感觉还是比较麻烦的,遇到数据很大的时候不能手工进行了 本想用linux下的DIFF来进行对比,发现结果很乱.时间很紧最后还是手工了. 现在忙完要认认真真学习一下 ...

  6. Beaglebone Black - 控制 BBB 板上的 LED 灯

    BBB 的板上有五个 LED 灯,一个电源,四个其他指示灯,usr0 至 usr3 .这次学习是控制 usr0 至 3 让它们亮着,熄灭,闪.算是个 Hello World 实验.非常简单. 需要的材 ...

  7. ServiceStack.OrmLite 笔记2 -增

    ServiceStack.OrmLite 笔记2 这篇主要介绍 增加 db.Insert(new Employee { Id = 1, Name = "Employee 1" }) ...

  8. Scrum Meeting---Eleven(2015-11-6)

    今日已完成任务和明日要做的任务 姓名 今日已完成任务 今日时间 明日计划完成任务 估计用时 董元财 倒计时设计 3h 商品发布页设计 4h 胡亚坤 低栏设计 2h UI风格 2h 刘猛 通讯录设计 2 ...

  9. iOS - Swift NSProcessInfo 系统进程信息

    前言 public class NSProcessInfo : NSObject 1.获取系统进程信息 // 创建系统进程信息对象 let processInfo:NSProcessInfo = NS ...

  10. springmvc前后端传值

    @pathvible 后端传值(rest风格) exp: @requestMapping("/view/{userId}") public String getiew(@Parth ...