拖放是一种常见的特性，即抓取对象以后拖到另一个位置，在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. How difficult is it to create a JavaScript framework?

    分享来自 quora 的一篇文章 https://www.quora.com/How-difficult-is-it-to-create-a-JavaScript-framework https:// ...

  2. (中等) POJ 1054 The Troublesome Frog，记忆化搜索。

    Description In Korea, the naughtiness of the cheonggaeguri, a small frog, is legendary. This is a we ...

  3. Java层与Jni层的数组传递（转）

    源:Java层与Jni层的数组传递 Android开发中,经常会在Java代码与Jni层之间传递数组(byte[]),一个典型的应用是Java层把需要发送给客户端的数据流传递到Jni层,由Jni层的S ...

  4. “&”详解

    1.引用 引用就是某一变量(目标)的一个别名,对引用的操作与对变量直接操作完全一样. &作为引用的时候,必须在定义时候就进行初始化,若不进行初始化则会编译报错. 2.取地址 &作为取地 ...

  5. Spring自定义标签

    一.原理: 1.Spring通过XML解析程序将其解析为DOM树, 2.通过NamespaceHandler指定对应的Namespace的BeanDefinitionParser将其转换成BeanDe ...

  6. IOS开发－OC学习－NSTimer的使用

    上一篇博客中在改变属性值的时候使用了timer进行自动改变.关于NSTimer的更详细的用法如下: 定义一个NSTimer类型的timer,和一个count,其中timer是定时器,count是计数的 ...

  7. Android 控件布局常用属性

    <!--单个控件经常用到android:id —— 为控件指定相应的IDandroid:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串a ...

  8. 优酷、YouTube、Twitter及JustinTV几个视频网站的架构

      优酷视频网站架构 一.网站基本数据概览据2010年统计,优酷网日均独立访问人数(uv)达到了8900万,日均访问量(pv)更是达到了17亿,优酷凭借这一数据成为google榜单中国内视频网站排名最 ...

  9. Sublime text追踪函数插件

    Sublime Text2/3怎样在Ubuntu中配置CTags插件 | 浏览:1278 | 更新:2014-03-05 10:34 1 2 3 4 5 6 7 分步阅读 本文详解在Ubuntu Li ...

  10. 安卓自定义类似TabHost的导航栏

    有时候为了项目需要我们要自定义一些导航控件,类似下面这样. 下面给大家讲讲我是怎么实现的, 1.素材准备(这个都是美工的事情) 2.①资源文件共有五个 如下: activity_main_first. ...