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. Windows Server 2012 NAT端口转发

     

  2. Solr高效利用：Solr实现SQL的查询与统计

    1.如何高效使用Solr查询功能 ?2.单个字段分组统计如何实现? 3.IN条件查询有几种方式? 4.多个字段分组统计是否只支持count? Cloudera公司已经推出了基于Hadoop平台的查询统 ...

  3. 浅析Redis 和MongoDB

    今天来聊聊什么事nosql,一听nosql也许很多人会觉得很高大上的感觉,但其实接触过了也还觉得还行,随着当今数据的疯狂爆炸性的增长,传统的RDBMS也越来越暴露出他的不足之处,所以,作为一名合格的程 ...

  4. hdfs底层存储分隔符

    字段分割 \ map字段里面key \ value \ 每行结尾用linux换行符 \0a '\r'是回车,'\n'是换行,前者使光标到行首,后者使光标下移一格,通常敲一个回车键,即是回车,又是换行( ...

  5. 常见sql注入的防范总结

    在平时的开发过程中,我们可能很少会刻意的去为项目做一个sql注入的防范,这是因为你可能因为使用了某些框架,而无意间已经有了对应sql注入的一些防范操作(比如mybatis使用#{XX}传参,属于预编译 ...

  6. nvm use 指定版本后无效 win7

    如图所示,nvm install 6.12.3之后,使用命令nvm use 6.12.3,提示切换成功,但是执行node app.js时,报错没有node命令,执行nvm ls查看,发现没有任何版本是 ...

  7. WPF 自定义分页控件二

    一:添加自定义分页控件,命名为KDataPagerTwo: public class KDataPagerTwo : Control, INotifyPropertyChanged { static ...

  8. vuejs实现瀑布流布局（三）

    前面写过vuejs实现的瀑布流布局,<vuejs实现瀑布流布局(一)>和<vuejs实现瀑布流布局(二)>也确实实现了瀑布流布局,但是这个是基于SUI-Mobile实现的无限滚 ...

  9. Termux 详细安装

    termnux安装方法 https://blog.csdn.net/u010475354/article/details/79675893 使用Termux把Android手机变成SSH服务器 htt ...

  10. Mybatis的回顾学习

    <!--id:statementId resultType:查询结果集的数据类型 parameterType:查询的入参 --> <selectid="getUserByI ...