要想在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. Spring 框架 详解 （三）-----IOC装配Bean

    IOC装配Bean: 1.1.1 Spring框架Bean实例化的方式: 提供了三种方式实例化Bean. * 构造方法实例化:(默认无参数) * 静态工厂实例化: * 实例工厂实例化: 无参数构造方法 ...

  2. UE4简单AI

    首先做个小小的声明把,由于俺之前也没接触过AI ,所以有一些专业的词汇可能翻译存在各种问题,如果你发现的话,还是希望能够提出来哦,我们一起进步. 记住配合视频食用更佳哦~ 视频连接:http://ww ...

  3. 【转载】C++内存分配

    原文:C++内存分配 内存泄露相信对C++程序员来说都不陌生.解决内存泄露的方案多种多样,大部分方案以追踪检测为主,这种方法实现起来容易,使用方便,也比较安全. 首先我们要确定这个模块的主要功能: 能 ...

  4. How To Use RUN_PRODUCT In Oracle Forms

    Run_Product is used to run Oracle Reports (RDF/REP files) in Oracle Forms. It invokes one of the sup ...

  5. Django 查询很经典的

    版权归作者所有,任何形式转载请联系作者. 作者:petanne(来自豆瓣) 来源:https://www.douban.com/note/301166150/  1.多表连接查询:感觉django太N ...

  6. 【转】在网页中运行VB6程序

      用VB6做的程序在网页里运行, 需要把程序做成OCX格式,下面简单做一介绍: 首先新建一个工程, 选择ActivX控件: 然后添加控件和代码: 然后F5运行 然后按下图设置,去掉弹出消息阻止 这样 ...

  7. ubuntu14.04换一个更快的源

    mirrors.yun-idc.com,这个源可比ubuntu自带的源快多了,我的source.list文件内容如下: deb http://mirrors.yun-idc.com/ubuntu/ t ...

  8. Redis事务的分析及改进

    Redis事务的分析及改进 Redis的事务特性 数据ACID特性满足了几条? 为了保持简单,redis事务保证了其中的一致性和隔离性: 不满足原子性和持久性: 原子性 redis事务在执行的中途遇到 ...

  9. 在SQL Server中 获取日期、日期格式转换

    --常用日期转换参数: PRINT CONVERT(varchar, getdate(), 120 ) 2016-07-20 16:09:01 PRINT replace(replace(replac ...

  10. spring的自动装配(default-autowire="byName")

    自动装配,官方给出的定义是这样:Spring IoC容器可以自动装配(autowire)相互协作bean之间的关联关系.因此,如果可能的话,可以自 动让Spring通过检查BeanFactory中的内 ...