拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在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. MAC 调整Launchpad 图标大小

    1.调整每一列显示图标数量 defaults write com.apple.dock springboard-rows -int 7 2.调整每一行显示图标数量 defaults write com ...

  2. struts2.0 s标签_小小鸟_百度空间

    struts2.0 s标签 1． Struts2页面开发中常用标签使用说明 1.1．往action里传值的使用方式: <input name="userName" type= ...

  3. （总结）Linux的chattr与lsattr命令详解

    PS:有时候你发现用root权限都不能修改某个文件,大部分原因是曾经用chattr命令锁定该文件了.chattr命令的作用很大,其中一些功能是由Linux内核版本来支持的,不过现在生产绝大部分跑的li ...

  4. STL中的所有算法(70个)

    STL中的所有算法(70个)----9种类型(略有修改by crazyhacking) 参考自: http://www.cppblog.com/mzty/archive/2007/03/14/1981 ...

  5. Android SDK开发包国内下载地址（转）

    想了解Android 应用开发,但可恨开发环境安装就困难重重,这里找到一个国内下载地址,特转来记录 Android SDK开发包国内下载地址

  6. jQuery扩展两类函数（对象调用，静态调用）

    作者:zccst 先看小例子: $(function(){ //扩展方式1-通过对新调用 $.fn.each1=function(){ console.log("hehehehe$.fn.f ...

  7. css(二) block，inline和inline-block概念和区别

    转: http://www.cnblogs.com/KeithWang/p/3139517.html 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-leve ...

  8. Unity3D ——强大的跨平台3D游戏开发工具（五）

    第九章 图形用户界面类G.U.I 您在玩很多3D游戏的时候,不知是否注意到在游戏界面中,总有一些图形和文字信息是不随着3D视角的改变而改变的.这也是由于游戏本身的要求而决定的.比如说英雄的生命值,聊天 ...

  9. 如何用 Git 合并两个库,并保留提交历史

    转载自 https://segmentfault.com/a/1190000000678808 背景 一个中型规模项目,开始规划时就打算采用 C/S 架构,后端是单纯的 API 服务,前端在 Web ...

  10. python2与python3编码问题

    python2: UnicodeDecodeError: 'ascii' codec can't decode byte 0xc4 in position 33: 解决办法: 在报错的页面添加代码:  ...