要想在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. HTML在IE中的条件注释

    HTML在IE中的条件注释 HTML的条件注释在IE5中被首次引入,直到IE9.一直都是简单地判定用户浏览器(IE,非IE,IE版本)的一种手段,而在IE10的标准模式下,条件注释功能被停止支持(兼容 ...

  2. FZU 2146

    Easy Game Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit St ...

  3. 【转载】在Linux中使用VS Code编译调试C++项目

    原文:在Linux中使用VS Code编译调试C++项目 最近项目需求,需要在Linux下开发C++相关项目,经过一番摸索,简单总结了一下如何通过VS Code进行编译调试的一些注意事项. 关于VS ...

  4. Debian8 远程登录Permission Denied,please try again

    多数是系统没有开启Root登录的权限. 修改root的ssh权限: ① vi /etc/ssh/sshd_config ② 找到配置项PermitRootLogin 将此项的值改为yes ③ 重启ss ...

  5. fzu 1015 土地划分（判断线段相交+求出交点+找规律）

    链接:http://acm.fzu.edu.cn/problem.php?pid=1015  Problem 1015 土地划分 Accept: 714    Submit: 1675Time Lim ...

  6. splay学习

    今天学习了一下spaly..... 感觉除了比较难打,比较难调,但还是很好理解的啊.... 1588: [HNOI2002]营业额统计 Time Limit: 5 Sec  Memory Limit: ...

  7. FLASH CC 2015 CANVAS （二）html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

  8. T-SQL Apply的用法

    SQL Server 2005 新增 cross apply 和 outer apply 联接语句,增加这两个东东有啥作用呢? 我们知道有个 SQL Server 2000 中有个 cross joi ...

  9. I2总线

    I2C简介 飞利浦(PHILIPS)公司开发的两线式串行总线 每个器件都有一个唯一的地址识别 1.只要求两条总线线路:一条串行数据线SDA,一条串行时钟线SCL 2.每个连接到总线的器件都可以通过唯一 ...

  10. 对sizeof的思考

    一.sizeof的特点(与strlen比较) 1.sizeof是运算符,strlen是函数,这意味着编译程序在编译的时候就把sizeof计算过了,所以sizeof(x)可以用来定义数组维数. 例如 i ...