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");

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style>
#d1, #d2 {
width:200px;
height:200px; border:1px solid gray;
float:left;
margin-right:20px;
} </style>
<script>
function drag(e) {
e.dataTransfer.setData("Text", e.target.id);
} function dragover(e) {
e.preventDefault();
} function move1(e) {
e.preventDefault();
var id = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(id));
}
</script>
</head>
<body>
<div id="d1" ondragover="dragover(event)" ondrop="move1(event)">
<img id="i1" src="ts.gif" draggable="true" ondragstart="drag(event)" /><br />
<a id="Img1" draggable="true" ondragstart="drag(event)">把我也拖走吧!</a>
</div> <div id="d2" ondragover="dragover(event)" ondrop="move1(event)"></div>
</body>
</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. MikroTik RouterOS防火墙与过滤详解

    MikroTik RouterOS能对包状态过滤:P2P协议过滤:源和目标NAT:对源MAC.IP地址.端口.IP协议.协议(ICMP.TCP.MSS等).接口.对内部的数据包和连接作标记.ToS 字 ...

  2. Servlet的使用方法详细说明

    Servlet的生命周期方法: init() destroy() doGet(HttpServletRequest request,HttpServletResponse response) 客户端请 ...

  3. 开源中国git使用方法

    1.添加公匙. 打开开源中国git公匙管理 用TortoiseGit  Puttygen生成公匙文件  生成过程中  不断移动点击鼠标(因为生成密匙过程是记录鼠标变化作为加密过程)           ...

  4. Tomcat异常 Multiple Contexts have a path of "/qqshl".解决方法

    Tomcat异常 Multiple Contexts have a path of "/qqshl".解决方法 找到tomcat映射文件Service.xml,将文件中的conte ...

  5. Longest Increasing Path in a Matrix

    Given an integer matrix, find the length of the longest increasing path. From each cell, you can eit ...

  6. Java中 final static super this instanceof 关键字用法

    一.final关键字 final可以修饰变量.方法及类: 1.当定义一个final变量时,jvm会将其分配到常量池中,其所修饰的对象只能赋值一次,对基本类型来说是其值不可变,引用类型(包括作为函数形参 ...

  7. 76 binary_search 查找重复元素

    [本文链接] http://www.cnblogs.com/hellogiser/p/binary-search-for-repeated-element.html [题目] 给定一个升序排列的自然数 ...

  8. JAVA thread0.interrupt()方法

    interrupt()只是改变中断状态而已,interrupt()不会中断一个正在运行的线程.这一方法实际上完成的是,给受阻塞的线程抛出一个中断信号,这样受阻线程就得以退出阻塞的状态. 更确切的说,如 ...

  9. python之基本数据类型

    Python运算符及基本数据类型 运算符: 1.算数运算 2. 比较运算 3. 赋值运算 4. 逻辑运算 5. 成员运算 基本数据类型: 1. 数字 int(整型) 在32位机器上,整数的位数为32位 ...

  10. ABAP ALV单个单元格状态编辑-简单版本

    *&---------------------------------------------------------------------* *& Report  ZPPR0024 ...