拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在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. POJ 2976 Dropping tests 01分数规划 模板

    Dropping tests   Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6373   Accepted: 2198 ...

  2. postgresql 数据库的备份和恢复 （pg_dump 和 pg_restore）

    pg_dump 用来备份数据库: pg_restore 用来恢复数据库: 备份出来的文件可以用 XZ (linux 自带的压缩工具压缩). XZ压缩最新压缩率之王 xz这个压缩可能很多都很陌生,不过您 ...

  3. php中__clone() shallow copy 只是浅复制

    什么是浅复制呢? 简单一点,就是说复制一个对象的时候,如果对象$Obj的一个属性的类型是引用类型的,比如 $person这个属性,指向的是一个 叫做 $objPerson的一个引用, 那么复制$Obj ...

  4. CMU机器学习课程－简介

    CMU在机器学习研究领域大名鼎鼎,Tom Mitchell 即是该学校老师.学校开设有机器学习课程.如今机器学习应用的领域越来越广泛,之前传统的<机器学习>课程,现在分成一般非机器学习领域 ...

  5. JAVA中浅复制与深复制 - coolmist - ITeye技术网站

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  6. Mac下安装包管理平台Homebrew（Mac 10.12）

    在终端上输入: /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/maste ...

  7. N皇后问题——递归求解

    比较简单,废话不说,上代码: public class NQueen { //比如:position[1]=3,表示第一行的第三列有一个皇后 private int [] position; //总的 ...

  8. (简单) HDU 3397 Sequence operation，线段树+区间合并。

    Problem Description lxhgww got a sequence contains n characters which are all '0's or '1's. We have ...

  9. easyui-01 怎么样使用easyui

    console.info();在控制台打印. 1.引入 <script type="text/javascript" src="../../jquery-easyu ...

  10. mysql查看sql语句执行时间

    原文地址: http://www.cnblogs.com/happySmily/p/5943311.html