拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在HTML5中，拖放是标准的一部分，任何元素都能够拖放。

1、html5拖放：（drag和drop）是HTML5标准的组成部分

拖动开始：ondragstart:调用了一个函数，drag（event），它规定了被拖动的数据

设置拖动数据：setData（）：设置被拖数据的数据类型和值

放入位置：ondragover:事件规定在何处放置被拖动的数据

放置：ondrop:当放置被拖动数据时，会发生drop事件

下例是将网页上的图片，拖放到网页上的指定区域：

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
     <title>拖放</title>
     <style>
         .box{
             width: 400px;
             height: 400px;
         }
         #box1{
             background-color: #cccccc;
         }
     </style>
     <script src="app.js"></script>
 </head>
 <body>
     <div id="box1" class="box"></div>
     <img src="1.jpg" id="img1" height="400px" width="400px">
     <div id="msg"></div>
 </body>
 </html>

其中用到的app.js:

 var boxDiv, msgDiv, img1;

 window.onload = function() {
     boxDiv = document.getElementById("box1");
     msgDiv = document.getElementById("msg");
     img1 = document.getElementById("img1");

     // boxDiv.ondragenter = function(e){
     //     showObj(e);
     // }
     boxDiv.ondragover = function(e){
         e.preventDefault();
     }
     img1.ondragstart = function(e){
         e.dataTransfer.setData("imgId","img1");
     }

     boxDiv.ondrop = function(e){
         showObj(e.dataTransfer);
         e.preventDefault();

         var img = document.getElementById(e.dataTransfer.getData("imgId"));
         boxDiv.appendChild(img);
     }
 }

 function showObj(obj){
     var s = "";
     for(var k in obj){
         s += k+ ":" + obj[k] +"<br/>"
     }
     msgDiv.innerHTML = s;
 }

2、html5拖放本地资源

下例是将本地的图片，拖放到网页上的指定区域：

 <<DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title>拖放</title>
     <style>
         #imgContainer{
             background-color: #cccccc;
             width:500px;
             height: 500px;
         }
     </style>
     <script src="app.js"></script>
 </head>
 <body>
     <div id="imgContainer"></div>
     <div id="msg"></div>
 </body>
 </html>

其中的app.js：

 var imgContainer, msgDiv;

 window.onload = function(){
     imgContainer = document.getElementById("imgContainer");
     msgDiv = document.getElementById("msg");

     imgContainer.ondragover = function(e){
         e.preventDefault();
     }
     imgContainer.ondrop = function(e){
         e.preventDefault();

         var f= e.dataTransfer.files[0];
         var fileReader = new FileReader();
         fileReader.onload = function(e){
             showObj(e.target);
             imgContainer.innerHTML = "<img src=\""+fileReader.result+\"">";
         }
         fileReader.readAsDataURL(f);
     }
 }

 function showObj(obj){
     var s="";
     for(var k in obj){
         s+=k+":"+obj[k]+"<br/>";
     }
     msgDiv.innerHTML = s;
 }

[html5] 学习笔记- html拖放的更多相关文章

  1. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  2. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  4. HTML5学习笔记 拖放

    拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...

  5. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  6. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  7. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  8. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  9. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

随机推荐

  1. CI如何在子目录下可以设置默认控制器

    CI建立大型大型的应用程序,需要创建子文件夹在application/controllers下建立文件夹app1app1目录下有多个控制器,ca.php,cb.php我希望定义app1下的默认控制器, ...

  2. Quick Cocos2dx CCLuaStack has no member names 'loadChunksZip'

    demo进行了这么久,已经很久没有连真机调试一下了,昨天下午我旁边的家伙连真机调试出了很多问题,于是我也连真机调一下吧. 运行一下project.android里面的 build_native.bat ...

  3. Java6 WebService学习

    首先,建立一个WebService: package garfield; import javax.jws.WebService; import javax.xml.ws.Endpoint; @Web ...

  4. Dom编程（二）

    document是window对象的一个属性,因为使用window对象成员的时候可以省略window.,所以一般直接写document  document的方法: (1)write:向文档中写入内容. ...

  5. IOS开发中摇一摇是怎么实现的

    三个方法,分别是开始摇一摇,结束摇一摇,取消摇一摇,我们可以在里面对应的进行事件处理,或者在ui上进行信息展示: 1.开始摇一摇:(在实际app中用需要处理的语句替换NSLog(@"开始摇一 ...

  6. 数据可视化－OmniGraffle软件

    OmniGraffle Pro for mac破解版是一款运行在MAC OS平台上的思维导图流程图制作软件,通过思维导图软件(OmniGraffle Pro MAC)帮你组织头脑中思考的信息,组织头脑 ...

  7. Apache/nginx转发设置-分布式部署

    Apache转发设置1. Weblogic安装 Weblogic8和Weblogic10默认安装,选择完全安装即可,如果是Weblogic9则选择自定义安装,勾选WebService plugin 2 ...

  8. JSON详解（转载）

    JSON详解 阅读目录 JSON的两种结构 认识JSON字符串 在JS中如何使用JSON 在.NET中如何使用JSON 总结 JSON的全称是”JavaScript Object Notation”, ...

  9. mysql常用博客论坛

    大神博客: starive的博客:http://blog.itpub.net/26435490/viewspace-1133659/ 北在南方的博客:http://blog.itpub.net/226 ...

  10. Selenium2（java）selenium常用API 六

    selenium处理HTML5 处理Vedio WebDriver driver = new FirefoxDriver(); driver.get("http://videojs.com/ ...