l元素可以用于拖拽必须设置draggable="true"属性，img和a标签除外，她们两个默认就可以被拖拽
想做拖拽处理，就需要在Dom元素上监听拖放的事件：dragstart,drag,dragenter,dragover,dragleve,drop,dragend

在文档中，默认document最先触发以上事件，而默认的处理是阻止页面元素的变化，想人为的控制拖拽的元素的变化需要我们改动代码。所有必需去掉document的默认处理

document.ondragover = function(e) {

e.preventDefault();

};

document.ondrop = function (e) {

e.preventDefault();

};

拖拽事件event中属性：dataTransfer是传递数据的关键。使用dataTransfer的setData（“Text",data）方法，把要拖拽的数据放到dataTransfer中，在拖拽完毕的事件中，再从中取出数据，用方法：getData("text/plain");

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5.     <title></title>
  6.     <style>
  7.         #d1, #d2 {
  8.             width:200px;
  9.             height:200px;
  10.  
  11.             border:1px solid gray;
  12.             float:left;
  13.             margin-right:20px;
  14.         }
  15.  
  16.     </style>
  17.     <script>
  18.         function drag(e) {
  19.             e.dataTransfer.setData("Text", e.target.id);
  20.         }
  21.  
  22.         function dragover(e) {
  23.             e.preventDefault();
  24.         }
  25.  
  26.         function move1(e) {
  27.             e.preventDefault();
  28.             var id = e.dataTransfer.getData("Text");
  29.             e.target.appendChild(document.getElementById(id));
  30.         }
  31.     </script>
  32. </head>
  33. <body>
  34.      <div id="d1" ondragover="dragover(event)" ondrop="move1(event)">
  35.          <img id="i1" src="ts.gif" draggable="true" ondragstart="drag(event)" /><br />
  36.          <a id="Img1"  draggable="true" ondragstart="drag(event)">把我也拖走吧！</a>
  37.     </div>
  38.  
  39.     <div id="d2" ondragover="dragover(event)" ondrop="move1(event)"></div>
  40. </body>
  41. </html>

HTML5学习之拖放（十）的更多相关文章

  1. HTML5学习笔记 拖放

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

  2. HTML5 学习05—— 拖放（Drag 和 Drop）

    拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...

  3. HTML5学习笔记（十九）：Lambda和Promise

    Lambda 在ES6的标准中称为Arrow Function(箭头函数).下面是一个简单的箭头函数: x => x * x 上面的定义和下面的代码定义效果一样: function (x) { ...

  4. HTML5学习笔记（十六）：原型、类和继承【JS核心知识点】

    理解原型 在JavaScript中,只要声明了一个函数,就会为该函数创建一个名为prototype的属性,该属性指向当前函数的原型对象. 而函数的原型对象有一个constructor属性,该属性指向刚 ...

  5. HTML5学习笔记（十八）：闭包

    高阶函数 JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,也可以返回一个函数,这种函数就称之为高阶函数. 函数作为参 ...

  6. HTML5学习笔记（十五）：方法

    在一个对象中绑定函数,称为这个对象的方法. 在JavaScript中,对象的定义是这样的: var xiaoming = { name: '小明', birth: 1990 }; 但是,如果我们给xi ...

  7. HTML5学习笔记（十四）：变量作用域

    在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量: function foo() { var x ...

  8. HTML5学习笔记（十二）：JavaScript新增Map和Set

    Map JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实际上Nu ...

  9. HTML5学习笔记（十）：CSS常用操作

    对齐 在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐 使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 ...

随机推荐

  1. Laravel5.1-错误和日志

    简介 这一章也是属于文档写得比较混乱的一章,所以我决定重新组织一下内容结构: 配置 debug配置 我们都知道,开发环境应该把debug打开,生产环境应该把debug关闭:这个设置在config/ap ...

  2. php中0," ",null和false的区别

    php中很多还不懂php中0,"",null和false之间的区别,这些区别有时会影响到数据判断的正确性和安全性,给程序的测试运行造成很多麻烦.先看一个例子: <? $str ...

  3. 单链表的类的c++实现

    #include<iostream> using namespace std;template <class T>struct linkNode{ T data; linkNo ...

  4. ubuntu 安装mysql

    1.检查是否已经安装mysql netstat -tap | grep mysql 2.安装mysql 2.1 先更新下软件列表 :sudo apt-get update 2.2 安装mysql :s ...

  5. HTTP协议与HTTPS协议区别

    HTTPS(Secure Hypertext Transfer Protocol)安全超文本传输协议:   它是一个安全通信通道,它基于HTTP开发,用于在客户计算机和服务器之间交换信息,它使用安全套 ...

  6. 【架构】RPC 使用 Haproxy、keepalive作为负载均衡

    参考资料: Haproxy+keepalived 高可用负载:  http://www.tuicool.com/articles/qY7Rz23 keepalived原理(主从配置+haproxy)及 ...

  7. 【GoLang】函数作为 类型 和 值

    代码示例 package test import ( "fmt" "testing" ) type testInt func(int) bool func is ...

  8. js apply 和 call

    http://www.cnblogs.com/KeenLeung/archive/2012/11/19/2778229.html

  9. 使用Java中的IO流，把A文件里的内容输入到B文件中

    我们先创建两个文本文件,out.txt和in.txt,在out.txt中输入"Hello World",然后使用FileInputStream把字符串读取出来,再使用FileOut ...

  10. dump、cpio、tar、dd四种备份工具比较

    原文  http://blog.csdn.net/ether_lai/article/details/12656219 dump dump可执行文件系统增量备份的存储操作 ,dump 可将目录或整个文 ...