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

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

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

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

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

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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.  <meta charset="UTF-8">
  5.      <title>拖放</title>
  6.      <style>
  7.          .box{
  8.              width: 400px;
  9.              height: 400px;
  10.          }
  11.          #box1{
  12.              background-color: #cccccc;
  13.          }
  14.      </style>
  15.      <script src="app.js"></script>
  16.  </head>
  17.  <body>
  18.      <div id="box1" class="box"></div>
  19.      <img src="1.jpg" id="img1" height="400px" width="400px">
  20.      <div id="msg"></div>
  21.  </body>
  22.  </html>

其中用到的app.js:

  1.  var boxDiv, msgDiv, img1;
  2.  
  3.  window.onload = function() {
  4.      boxDiv = document.getElementById("box1");
  5.      msgDiv = document.getElementById("msg");
  6.      img1 = document.getElementById("img1");
  7.  
  8.      // boxDiv.ondragenter = function(e){
  9.      //     showObj(e);
  10.      // }
  11.      boxDiv.ondragover = function(e){
  12.          e.preventDefault();
  13.      }
  14.      img1.ondragstart = function(e){
  15.          e.dataTransfer.setData("imgId","img1");
  16.      }
  17.  
  18.      boxDiv.ondrop = function(e){
  19.          showObj(e.dataTransfer);
  20.          e.preventDefault();
  21.  
  22.          var img = document.getElementById(e.dataTransfer.getData("imgId"));
  23.          boxDiv.appendChild(img);
  24.      }
  25.  }
  26.  
  27.  function showObj(obj){
  28.      var s = "";
  29.      for(var k in obj){
  30.          s += k+ ":" + obj[k] +"<br/>"
  31.      }
  32.      msgDiv.innerHTML = s;
  33.  }

2、html5拖放本地资源

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

  1.  <<DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <title>拖放</title>
  6.      <style>
  7.          #imgContainer{
  8.              background-color: #cccccc;
  9.              width:500px;
  10.              height: 500px;
  11.          }
  12.      </style>
  13.      <script src="app.js"></script>
  14.  </head>
  15.  <body>
  16.      <div id="imgContainer"></div>
  17.      <div id="msg"></div>
  18.  </body>
  19.  </html>

其中的app.js：

  1.  var imgContainer, msgDiv;
  2.  
  3.  window.onload = function(){
  4.      imgContainer = document.getElementById("imgContainer");
  5.      msgDiv = document.getElementById("msg");
  6.  
  7.      imgContainer.ondragover = function(e){
  8.          e.preventDefault();
  9.      }
  10.      imgContainer.ondrop = function(e){
  11.          e.preventDefault();
  12.  
  13.          var f= e.dataTransfer.files[0];
  14.          var fileReader = new FileReader();
  15.          fileReader.onload = function(e){
  16.              showObj(e.target);
  17.              imgContainer.innerHTML = "<img src=\""+fileReader.result+\"">";
  18.          }
  19.          fileReader.readAsDataURL(f);
  20.      }
  21.  }
  22.  
  23.  function showObj(obj){
  24.      var s="";
  25.      for(var k in obj){
  26.          s+=k+":"+obj[k]+"<br/>";
  27.      }
  28.      msgDiv.innerHTML = s;
  29.  }

[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. [iOS]C语言技术视频-07-函数的定义

    下载地址: 链接: http://pan.baidu.com/s/1mgiWSqc 密码: 2q9k

  2. 漂亮的HTML表格 - ebirdfighter的日志 - 网易博客

    一个像素边框的表格: Info Header 1 Info Header 2 Info Header 3 Text 1A Text 1B Text 1C Text 2A Text 2B Text 2C ...

  3. CodeForces 660A Co-prime Array

    水题.放个1就可以了.暴力的找数字也是很快的. #include<cstdio> #include<cstring> #include<cmath> #includ ...

  4. c循环程序

    6.用双循环打印n行如下图形. * *** ***** ******* 6 7 8 #include<stdio.h> 9 int main() 10 { 11 int i=0,j=0,n ...

  5. POJ 1995 Raising Modulo Numbers

    快速幂取模 #include<cstdio> int mod_exp(int a, int b, int c) { int res, t; res = % c; t = a % c; wh ...

  6. FZU 2099 魔法阵

    手算. #include<cstdio> #include<cstring> #include<cmath> #include<algorithm> u ...

  7. ue4中窗口打开web地址

    首先打开项目,设置,widgets,启用webbroswer 新建一个蓝图, 在控件栏里就可以找到添加webbroswer 设置initial url就可以打开网页了, 项目中还用到获取界面参数,与界 ...

  8. 关于IP选项

    源:关于IP选项 校验和算法

  9. STM32驱动MPU6050

    轴 MEMS轴 MEMS 加速度计,以及一个可扩展的数字运动处理器 DMP(Digital Motion Processor),可用 I2C 接口连接一个第三方的数字传感器,比如磁力计.扩展之后就可以 ...

  10. IOS开发－UI学习－UISlider（滑动条）的使用

    滑动条即UISlider,是我们常见的软件中设置音量,亮度等的滑条,初始化及基本设置如下: // 新建滑动条 UISlider *slider = [[UISlider alloc]initWithF ...