HTML5学习之拖放（十）
在文档中，默认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学习之拖放（十）的更多相关文章
- HTML5学习笔记 拖放
拖放(Drag和drop)是html5标准的组成部分 拖放是一种常见的特性,即抓取对象以后拖到另一个位置 在html5中,拖放是标准一部分,任何元素都能够拖放. 设置元素为可拖放 首先,为了使元素可拖 ...
- HTML5 学习05—— 拖放（Drag 和 Drop）
拖放(Drag 和 drop)是 HTML5 标准的组成部分.即抓取对象以后拖到另一个位置. 例:将w3cschool图标拖动到矩形框中. <script> function allowD ...
- HTML5学习笔记（十九）：Lambda和Promise
Lambda 在ES6的标准中称为Arrow Function(箭头函数).下面是一个简单的箭头函数: x => x * x 上面的定义和下面的代码定义效果一样: function (x) { ...
- HTML5学习笔记（十六）：原型、类和继承【JS核心知识点】
理解原型 在JavaScript中,只要声明了一个函数,就会为该函数创建一个名为prototype的属性,该属性指向当前函数的原型对象. 而函数的原型对象有一个constructor属性,该属性指向刚 ...
- HTML5学习笔记（十八）：闭包
高阶函数 JavaScript的函数其实都指向某个变量.既然变量可以指向函数,函数的参数能接收变量,那么一个函数就可以接收另一个函数作为参数,也可以返回一个函数,这种函数就称之为高阶函数. 函数作为参 ...
- HTML5学习笔记（十五）：方法
在一个对象中绑定函数,称为这个对象的方法. 在JavaScript中,对象的定义是这样的: var xiaoming = { name: '小明', birth: 1990 }; 但是,如果我们给xi ...
- HTML5学习笔记（十四）：变量作用域
在JavaScript中,用var申明的变量实际上是有作用域的. 如果一个变量在函数体内部申明,则该变量的作用域为整个函数体,在函数体外不可引用该变量: function foo() { var x ...
- HTML5学习笔记（十二）：JavaScript新增Map和Set
Map JavaScript的默认对象表示方式{}可以视为其他语言中的Map或Dictionary的数据结构,即一组键值对. 但是JavaScript的对象有个小问题,就是键必须是字符串.但实际上Nu ...
- HTML5学习笔记（十）：CSS常用操作
对齐 在 CSS 中,可以使用多种属性来水平对齐元素. 水平对齐 使用 margin 属性来水平对齐,可通过将左和右外边距设置为 "auto",来对齐块元素. 把左和右外边距设置为 ...
随机推荐
- JQGrid 参数、属性API
JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做什么事情. 下面是转自其他人b ...
- json_decode()和json_encode()的使用方法
json_decode对JSON格式的字符串进行编码 json_encode对变量进行 JSON 编码 JS中对JSON的解析 一.JSON字符串转换为JSON对象 要运用上面的str1,必须 ...
- ssh authentication魔鬼细节--.ssh文件夹权限
换到7后出现莫名奇妙问题,ssh验证始终不起作用. 服务器 centos7#mkdir ~/.ssh centos7#touch ~/.ssh/authorized_keys centos7#chmo ...
- django xadmin多个model的数据渲染在统一个template中
adminx.py demo class ModelAdmin(object): #.... def get_context(self): context = super(SimCardService ...
- 在django项目外，使用django.db链接数据库(postgres)
要用python链接到数据库,又不想写太多代码.想到了django,就偷懒了下.用django.db直连. django版本:1.6.5 (1.5以后可以用以下代码) #coding=utf-8 __ ...
- Android Xpose Hook(一)
实验环境: Droid4x模拟器 (目前Android版本4.2.2) Android Studio 1.下载相关工具 XposedInstaller下载 http://repo.xp ...
- Aufs与Devicemapper的关系
Aufs与Devicemapper的应用 Aufs是Docker最初采用的文件系统,由于Aufs未能加入到Linux内核,考虑到兼容性问题,加入了Devicemapper的支持.目前,除少数版本如Ub ...
- 错误描述：请求“System.Data.SqlClient.SqlClientPermission, System.Data, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”类型的权限已失败
错误描述:请求“System.Data.SqlClient.SqlClientPermission, System.Data, Version=2.0.0.0, Culture=neutral, Pu ...
- C#跨线程操作控件
1.首先通过按键创建子线程: 创建子线程,子线程调用changeText方法. private void btnOK_Click(object sender, EventArgs e) { Threa ...
- Android自定义图形shape
在Android开发过程中,经常需要改变控件的默认样式, 那么通常会使用多个图片来解决.不过这种方式可能需要多个图片,比如一个按钮,需要点击时的式样图片,默认的式样图片. 这样就容易使apk变大.另一 ...