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内容初探的更多相关文章

  1. 自由创造属于你的H5内容

    在这里,你可以自由创造属于你的H5内容  mark下 http://www.ih5.cn/

  2. H5内容安全尺寸

    设备独立像素:iPhone5:320 * 568 >> 微信网页可视区高度:504px   iPhone6:375 * 667 >> 微信网页可视区高度:603px 设备独立像 ...

  3. JMeter-因cookie管理器不兼容返回H5内容内容的解决

    问题: 使用的post方法但是显示的是get,并且返回页面H5的内容 解决: jmeter版本太低了,需要选择cookie管理期选择兼容模式(一般默认的为standard)

  4. h5内容超出可以滑动展示的处理,iscroll的使用

    第一步: 引入js 第二步:页面结构 第三步:使用 dome效果:http://cubiq.org/dropbox/iscroll4/examples/simple/ 文档地址:http://iscr ...

  5. 混合开发H5的图片怎么适配自己想要的大小

    1.先上个自己没适配的图,这个图没显示全,因为用的是webview 所以 用的是webView的代理事件 解决 2.上代码 NSString *injectionJSString = @"v ...

  6. 微信清理H5真的太早了?这会是应用号发布的前兆吗

    三少爷的剑  2016-04-18 21:05 收藏35 评论7   两天之内,整个 H5 游戏创业陷入了两年狂热期以来最冷的冰点. 每一个正在忙于 H5 小游戏开发的开发者都在忙于砍掉游戏代码中有关 ...

  7. 才一年,H5的发展就成这样了......

    关于H5的发展,分享几个最近看到的惊人数据和新闻: 1.截至2015,有80%的App将全部或部分基于HTML5.这意味着大部分App的内容都将是以网页的形式呈现,典型的例子包括微信.Facebook ...

  8. H5开发HybridApp

    1 H5开发 开发HybridApp一般都是先完成H5部分,所谓的H5就是Html5页面,开发的时候我们在PC机上的浏览器调试即可,这里推荐Chrome F12模式. 在调试服务器请求数据部分要给ch ...

  9. H5活动产品设计指南基础版

    本文来自 网易云社区 . H5一般页面不会很多,看似简单,实际上会有很多细节需要注意,我自己在做过了几个H5之后,发现了一些常犯的问题,做了小结,希望给新开始做H5的产品相关的同学提供一些帮助.  首 ...

随机推荐

  1. angularjs指令中的scope

    共享 scope 使用共享 scope 的时候,可以直接从父 scope 中共享属性.因此下面示例可以将那么属性的值输出出来.使用的是父 scope 中定义的值. js代码: app.controll ...

  2. springboot通过poi导出excel

    Maven引入依赖 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi< ...

  3. update 中实现子查询

    mysql 在update中实现子查询的方式   当使用mysql条件更新时--最先让人想到的写法 UPDATE buyer SET is_seller=1 WHERE uid IN (SELECT  ...

  4. python零散补充与总结

    一 有一种情况,在Windows系统上面有一个文件,编码为gbk,将其上传到Linux虚拟机,系统编码为utf-8, 使用cat命令查看时是乱码,这时如何解决? [root@localhost ~]# ...

  5. android 开发 实现一个activity变成dialog对话框

    效果图: 首先说说为什么需要大费周章的去用activity实现一个dialog,明明android系统已经提供了一个更方便的dialog了.原因如下: 1.activity模式的dialog可以实现更 ...

  6. ansible安装使用入门

    生成对称密钥 执行以下命令,会在当前用户的.ssh目录下生成id_rsa和id_rsa_pub两个文件. ssh-keygen -t rsa root用户:/root/.ssh 普通用户:/home/ ...

  7. java判断字符串中是否包含中文 过滤中文

    package com.test; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Test ...

  8. 17.docker及scrapy-splash安装-1

    docker 安装网址: https://mirrors.aliyun.com/docker-toolbox/windows/docker-toolbox/ 这就安装成功了!!!

  9. web session 原理1

     原理 我们都知道,浏览器无状态的.浏览器是操作不了session的,浏览器能够做的只是传递cookie,每次都传递. 把当前主机下的,和当前请求相同域下的cookie 传递到服务器去,只要cooki ...

  10. webapi_uploadfile_gdal_to_geojson_and_unzipfile

    using ICSharpCode.SharpZipLib.Zip; using OSGeo.GDAL; using OSGeo.OGR; using System; using System.Col ...