HTML5拖放

拖放（Drag和drop）是H5标准的组成部分

此处需具备js基础知识及其H5拖拽部分相关方法

  1.  在拖动目标上触发事件 (源元素):
  2.         ondragstart - 用户开始拖动元素时触发
  3.         ondrag - 元素正在拖动时触发
  4.         ondragend - 用户完成元素拖动后触发
  5.  释放目标时触发的事件:
  6.         ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
  7.         ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  8.         ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
  9.         ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

下面来看几个例子

第一：本地拖放

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <style type="text/css">
  8.     #boxContainer{
  9.         background-color: #BC8F8F;
  10.         width: 600px;
  11.         height: 400px;
  12.     }
  13. </style>
  14. <body>
  15. <div id="boxContainer"></div>
  16. <div id="msg"></div>
  17. <script>
  18.     var imgContainer,msgDiv;
  19. window.onload=function(){
  20.     imgContainer=document.getElementById("boxContainer");
  21.     msgDiv=document.getElementById("msg");
  22.     imgContainer.ondragover=function(e){
  23.         e.preventDefault();//阻止事件event默认行为
  24.     };
  25.     imgContainer.ondrop=function(e){//通过showObj函数显示信息知道本地图片拖拽与file信息有关
  26.         e.preventDefault();
  27.         var f=e.dataTransfer.files[0];//获取信息
  28.         var fileReader=new FileReader();//读取信息
  29.         fileReader.onload=function(e){//通过fileReader监听事件
  30.             showObj(e.target);
  31.             imgContainer.innerHTML="<img src=\""+fileReader.result+"\">"
  32.         };
  33.         fileReader.readAsDataURL(f);//读取地址
  34.     }
  35. };
  36. function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息
  37.     var s="";//声明局部变量
  38.     for(var k in obj){//用forin循环遍历数据信息
  39.         s+=k+":"+obj[k]+"<br/>"
  40.     }
  41.     msgDiv.innerHTML=s;//显示信息在HTML
  42. }
  43. </script>
  44. </body>
  45. </html>

第二：H5拖放

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title></title>
  6. </head>
  7. <style type="text/css">
  8.     .box{
  9.         width:400px;
  10.         height:300px;
  11.     }
  12.     #box1{
  13.         float: left;
  14.         background-color: orange;
  15.     }
  16.     #box2{
  17.         float: left;
  18.         background-color: rosybrown;
  19.     }
  20. </style>
  21. <body>
  22. <div id="box1" class="box"></div>
  23. <div id="box2" class="box"></div>
  24. <img id="img1" src="data:images/demo.jpg" width="200" height="200"/>
  25. <div id="msg"></div>
  26. <script>
  27.        var box1Div,box2Div,msgDiv,img1;//声明全局变量
  28. window.onload=function(){
  29.     box1Div=document.getElementById("box1");//获取放置拖拽元素的div
  30.     box2Div=document.getElementById("box2");
  31.     msgDiv=document.getElementById("msg");//获取显示拖拽信息的元素的div
  32.     img1=document.getElementById("img1");
  33.  
  34.     box1Div.ondragenter=function(e){//给其添加ondragenter即当被鼠标拖动的对象进入其容器范围内时触发此事件，即给拖拽加监听事件        showObj(e);//e为event事件为事件参数   }
  35.     box1Div.ondragover=function(e){
  36.         e.preventDefault();//阻止事件event默认行为
  37.     };
  38.     box2Div.ondragover=function(e){//ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
  39.         e.preventDefault();//阻止事件event默认行为，调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
  40.     };
  41.     img1.ondragstart=function(e){//ondragstart - 用户开始拖动元素时触发
  42.         e.dataTransfer.setData("imgId","img1");//用setData方法获取数据
  43.     };
  44.     box1Div.ondrop=dropImghand;
  45.     box2Div.ondrop=dropImghand;//ondrop - 在一个拖动过程中，释放鼠标键时触发此事件
  46. };
  47. function dropImghand(e){//box1Div.ondrop=后拿出来设置函数名，即封装成方法，再在上面引用
  48.     showObj(e.dataTransfer);
  49.     e.preventDefault();//阻止事件event默认行为
  50.     //创建节点，放置数据
  51.     var img=document.getElementById(e.dataTransfer.getData("imgId"));
  52.     e.target.appendChild(img);//添加到节点当中
  53. }
  54. function showObj(obj){//这个函数只是为了表达在拖放成功后取显示去盛放拖拽造成的数据信息
  55.     var s="";//声明局部变量
  56.     for(var k in obj){//用forin循环遍历数据信息
  57.         s+=k+":"+obj[k]+"<br/>"
  58.     }
  59.     msgDiv.innerHTML=s;//显示信息在HTML
  60. }
  61.  
  62. </script>
  63. </body>
  64. </html>
  65.

HTML5之拖拽的更多相关文章

  1. HTML5之拖拽(兼容IE和非IE)

    前世:项目中需要拖动div,然后和某个div进行位置交换,这不是关键,关键是还要保存位置,然后在下次打开的时候按照保存的位置显示.还好本人功力深厚,一下子就想到了用localStorage来保存,事实 ...

  2. html5 文件拖拽上传

    本文首先发表在  码蜂笔记 : http://coderbee.net/index.php/web/20130703/266 html5 文件拖拽上传是个老话题了,网上有很多例子,我一开始的代码也是网 ...

  3. 基于html5可拖拽图片循环滚动切换

    分享一款基于html5可拖拽图片循环滚动切换.这是一款支持手机端拖拽切换的网站图片循环滚动特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="s ...

  4. [开源应用]利用HTTPHandler+resumableJs+HTML5实现拖拽上传[大]文件

    前言: 大文件传输一直是技术上的一大难点.文件过大时,一些性提交所有的内容进内存是不现实的.大文件带来问题还有是否支持断点传输和多文件同时传输. 本文以resumableJs为例,介绍了如何在ASP. ...

  5. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  6. HTML5文件拖拽

    HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...

  7. HTML5 实现拖拽

    如图 可以从第一个方框拖拽花色到第二个方框中. 也可以再拖动回来. 具体代码实现 index.html <!DOCTYPE HTML> <html> <head> ...

  8. html5实现拖拽文件上传

    以下是自学it网--中级班上课笔记 网址:www.zixue.it html文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict ...

  9. HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

  10. HTML5原生拖拽/拖放(drag & drop)详解

    前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...

随机推荐

  1. Integer 和 int 值比较

    int 是基本数据类型,会进池,可以使用 == 判断两个值相等 Integer是对象,比较对象不能使用 == , 可以使用Integer.intValue()将取出对象值比较

  2. 网络虚拟化技术 -- LXC TUN/TAP MACVLAN MACVTAP

    Linux的网络虚拟化是LXC项目中的一个子项目,LXC包括文件系统虚拟化,进程空间虚拟化,用户虚拟化,网络虚拟化,等等 [ LXC内核命名空间 ],这里使用LXC的网络虚拟化来模拟多个网络环境. 创 ...

  3. title: "MappedByteBuffer引起的jvm crash问题“

    

  4. [翻译] VBPieChart

    VBPieChart https://github.com/sakrist/VBPieChart Pie Chart iOS control with different animations to ...

  5. Excel英语成绩单 吴昊

  6. 沉淀再出发:OpenStack初探

    沉淀再出发:OpenStack初探 一.前言 OpenStack是IaaS的一种平台,通过各种虚拟化来提供服务.我们主要看一下OpenStack的基本概念和相应的使用方式. 二.OpenStack的框 ...

  7. 20、资源与本地化 System.Resources

    可以将字符串.图像或对象数据等资源包含在资源文件中,方便应用程序使用. .NET Framework 提供了五种创建资源文件的方法: •创建一个包含字符串资源的文本文件.或创建一个包含字符串.图像或对 ...

  8. 1001.A+B Format (20)解题描述

    1. 作业链接 2. 解题的思路过程 首先这是道简单的计算题,要求计算a+b的值. 看初值条件,将a和b的取值限制在一个区间内. 本题难点和重点是如何把输出值形成题目要求的格式. 因为负数可通过在前面 ...

  9. 【转】用JS创建json数据，并且可以动态往json数据里面添加新值，也可以修改值。

    原文地址:http://blog.csdn.net/panlingfan/article/details/45562893/ 函数不需要 return,因为 json 对象会被函数直接修改. var ...

  10. Linux和Unix的区别

    Linux      Unix 免费        收费 开源        不开源 硬件无要求   有要求 IBM Sun Hp 主流的Linux的发型版本: RedHat Fedora  Mand ...