h5内容初探
h5简介：
h5新特性
h5新增标签
article 和 section 的区别相当于 div 和 p标签的区别
1—6都是块级元素
h5新增属性
拖放
拖动事件
<style>
div {
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<div draggable="true" id="demo"></div>
<script>
var demo = document.getElementById('demo');
demo.ondragstart = function(e){
console.log('start',e)
}
demo.ondrag = function(e){
console.log('drag',e)
}
demo.ondragend = function(e){
console.log('end',e)
}
</script>
释放区事件
<style>
#demo {
width:100px;
height:100px;
background:red;
}
#demo1{
width:100px;
height:100px;
background:yellowgreen;
}
#demo2{
width:100px;
height:100px;
background:blueviolet;
}
.wrapper{
width:400px;
height:300px;
border:1px solid #000;
}
</style>
</head>
<body>
<div class="demo">
<div draggable="true" id="demo"></div>
<div draggable="true" id="demo1"></div>
<div draggable="true" id="demo2"></div>
</div>
<div class="wrapper"></div>
<script>
var demo = document.getElementsByClassName('demo')[0];
var wrapper = document.getElementsByClassName('wrapper')[0];
id = null;
demo.ondragstart = function (e){
console.log('start',e.target);
id = e.target.id;
}
wrapper.ondragenter = function (e){
console.log('enter');
}
wrapper.ondragover = function (e){
e.preventDefault(); //调用 preventDefault() 来避免浏览器对数据的默认处理
console.log('over');
} ondragover 事件规定在何处放置被拖动的数据，默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。 这要通过调用 ondragover 事件的 event.preventDefault() 方法：
wrapper.ondragleave = function (e){
console.log('leave');
}
wrapper.ondrop = function (e){
console.log('drop');
var oDiv = document.getElementById(id).cloneNode(true);
this.appendChild(oDiv);
}
</script>
</body>
dataTransfer: 返回用于传输数据到释放区的对象 （还可传输对象）
名称 说明 返回
types 返回数据的格式 字符串数组
getData(<format>) 返回指定格式的数据 字符串
setData(<format> , <data>) 设置指定格式的数据 void
clearData(<format>) 移除指定格式的数据 void
files 返回已被拖动文件的列表 fileList
上面的代码改成：
var demo = document.getElementsByClassName('demo')[0];
var wrapper = document.getElementsByClassName('wrapper')[0];
// id = null;
demo.ondragstart = function (e){
console.log('start',e.target);
e.dataTransfer.setData('id',e.target.id);
// id = e.target.id;
}
wrapper.ondragenter = function (e){
console.log('enter');
}
wrapper.ondragover = function (e){
e.preventDefault();
console.log('over');
}
wrapper.ondragleave = function (e){
console.log('leave');
}
wrapper.ondrop = function (e){
console.log('drop');
var oDiv = document.getElementById(e.dataTransfer.getData('id')).cloneNode(true);
this.appendChild(oDiv);
}
</script>
h5内容初探的更多相关文章
- 自由创造属于你的H5内容
在这里,你可以自由创造属于你的H5内容 mark下 http://www.ih5.cn/
- H5内容安全尺寸
设备独立像素:iPhone5:320 * 568 >> 微信网页可视区高度:504px iPhone6:375 * 667 >> 微信网页可视区高度:603px 设备独立像 ...
- JMeter-因cookie管理器不兼容返回H5内容内容的解决
问题: 使用的post方法但是显示的是get,并且返回页面H5的内容 解决: jmeter版本太低了,需要选择cookie管理期选择兼容模式(一般默认的为standard)
- h5内容超出可以滑动展示的处理，iscroll的使用
第一步: 引入js 第二步:页面结构 第三步:使用 dome效果:http://cubiq.org/dropbox/iscroll4/examples/simple/ 文档地址:http://iscr ...
- 混合开发H5的图片怎么适配自己想要的大小
1.先上个自己没适配的图,这个图没显示全,因为用的是webview 所以 用的是webView的代理事件 解决 2.上代码 NSString *injectionJSString = @"v ...
- 微信清理H5真的太早了？这会是应用号发布的前兆吗
三少爷的剑 2016-04-18 21:05 收藏35 评论7 两天之内,整个 H5 游戏创业陷入了两年狂热期以来最冷的冰点. 每一个正在忙于 H5 小游戏开发的开发者都在忙于砍掉游戏代码中有关 ...
- 才一年，H5的发展就成这样了......
关于H5的发展,分享几个最近看到的惊人数据和新闻: 1.截至2015,有80%的App将全部或部分基于HTML5.这意味着大部分App的内容都将是以网页的形式呈现,典型的例子包括微信.Facebook ...
- H5开发HybridApp
1 H5开发 开发HybridApp一般都是先完成H5部分,所谓的H5就是Html5页面,开发的时候我们在PC机上的浏览器调试即可,这里推荐Chrome F12模式. 在调试服务器请求数据部分要给ch ...
- H5活动产品设计指南基础版
本文来自 网易云社区 . H5一般页面不会很多,看似简单,实际上会有很多细节需要注意,我自己在做过了几个H5之后,发现了一些常犯的问题,做了小结,希望给新开始做H5的产品相关的同学提供一些帮助. 首 ...
随机推荐
- Linux性能优化 第五章 性能工具：特定进程内存
5.1 Linux内存子系统 在诊断内存性能问题的时候,也许有必要观察应用程序在内存子系统的不同层次上是怎样执行的.在顶层,操作系统决定如何利用交换内存和物理内存.它决定应用程序的哪一块地址空间将被放 ...
- 初级安全入门——SQL注入的原理与利用
工具简介 SQLMAP: 一个开放源码的渗透测试工具,它可以自动探测和利用SQL注入漏洞来接管数据库服务器.它配备了一个强大的探测引擎,为最终渗透测试人员提供很多强大的功能,可以拖库,可以访问底层的文 ...
- es6基础(2)--解构赋值
//解构赋值 { let a,b,rest; [a,b]=[1,2]; console.log(a,b); } //数组解构赋值 { let a,b,rest; [a,b,...rest]=[1,2, ...
- c# 枚举的定义,枚举的用法,获取枚举值
1.定义枚举类型 public enum Test { 男 = , 女 = } 2.获取枚举值 public void EnumsAction() { var s = Test.男;//男 var a ...
- ubuntu高版本如何设置开机启动脚本
ubuntu-18.04不能像ubuntu14一样通过编辑rc.local来设置开机启动脚本 可以通过下列简单设置后,可以使rc.local重新发挥作用. 1.建立rc-local.service文件 ...
- 【Linux】【Jmeter】配置Jmeter服务器和运行Jmeter
以前整理过Linux下的Jmeter知识,所以此处看可以参考以下链接: 参考链接:http://www.cnblogs.com/conquerorren/p/7880604.html [root@-- ...
- 数据库设计和ER模型-------之ER模型的基本概念（第二章）
ER模型(实体联系模型)的基本元素 实体:是一个数据对象,在ER模型中,实体用方框表示,方框内注明实体的名称 联系:表示一个或多个实体之间的关联关系,联系用菱形框表示,并用线段将其与相关的实体联系起来 ...
- jvm 内存分配 （转）
深入理解JVM—JVM内存模型 http://www.cnblogs.com/dingyingsi/p/3760447.html 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区 ...
- Exchange重启脚本
Much more from the source article itself ...... details or code stated above http://therealshrimp.bl ...
- import的使用
iimport函数用来调用python自带的.py文件或者用户自己编写的.py文件 调用方式很简单 1 import time 2 import lib import time 调用python自带的 ...