要想在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. Linux源代码分析工具链

    前言 看源代码是一个程序员必须经历的事情,也是可以提升能力的一个捷径.个人认为: 要完全掌握一个软件的方法只有阅读源码. 在Windows下有sourceinsight这个源码阅读软件(虽然我没用过, ...

  2. 转 Android 对话框(Dialog)大全 建立你自己的对话框

    Activities提供了一种方便管理的创建.保存.回复的对话框机制,例如 onCreateDialog(int), onPrepareDialog(int, Dialog), showDialog( ...

  3. EasyUI--messager

    1. alert 方法 <script type="text/javascript"> $( function() { $.messager.alert("调 ...

  4. [SAP ABAP开发技术总结]字符串处理函数、正则表达式

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  5. 【BZOJ】4636: 蒟蒻的数列

    4636: 蒟蒻的数列 Time Limit: 30 Sec  Memory Limit: 256 MBSubmit: 145  Solved: 71[Submit][Status][Discuss] ...

  6. html bootstrap 表头固定在顶部，表列 可以自由滚动的效果

    该效果主要是依照 bootstrap 的一个样式,class="navbar-fixed-top"; 参考网址为:http://v3.bootcss.com/components/ ...

  7. 删除List中制定的值的方法

    /** * * @param args */ public static void main(String[] args) { List<String> list = new ArrayL ...

  8. 编码实现Spring 利用@Resource注解实现bean的注入，xml实现基本数据类型的注入

    首先分析. 1: 肯定要利用dom4j读取xml配置文件,将所有的bean的配置信息读取出来 2: 利用反射技术,实例化所有的bean 3: 写注解处理器, 利用注解和内省实现依赖对象的注入. 4: ...

  9. SpringAop学习

    Spring Aop (jdk动态代理和cglib代理) Aop 的概念 aop即面向切面编程,一般解决具有横切面性质的体统(事务,缓存,安全) JDK动态代理: 可以使用实现proxy 类,实现jd ...

  10. [转载] 如何使用Lex/YACC

    原文: http://segmentfault.com/a/1190000000396608?hmsr=toutiao.io&utm_medium=toutiao.io&utm_sou ...