HTML5应用

HTML拖拽

概述

• HTML5 自带了拖拽相关的api(JavaScript),能够实现页面标签进行拖拽操作。

流程

1. 给被拖拽的标签添加属性 draggable=true

   <标签名 draggable='true'></标签名>
   

2. 给放置标签设置dragover 事件，用于取消禁止放置

   放置标签变量名.addEventListener('dragover',function(e){
       e.preventDefault();
   });
   

3. 当放置标签取消默认行为后，可以设置drop事件，当拖拽元素在放置标签上释放时，放置标签会触发该事件，在该事件中，完成标签的位置切换操作

   放置标签变量名.addEventListener('drop',function(e){
      //交换标签位置的代码
   });
   

4. HTML5 提供了 事件数据传递(dataTransfer)机制.可以实现在一个事件中将一个数据传递到另一个事件中。拖拽中可以在拖拽事件(dragstart)中将拖拽标签的id或class保存下来。在放置标签触发drop事件时，拿到拖拽标签的id或class。

   给拖拽标签设置拖拽事件(dargstart).该事件会在拖拽开始时执行一次。我们将拖拽标签的class或id保存下来
   拖拽标签变量名.addEventListener('dargstart',function(e){
       e.dataTransfer.setData('属性名','属性值')
   });
   

dataTransfer

保存数据

event对象.dataTransfer.setData('属性名','属性值');
//例子：保存一个class数据为item1
event对象.dataTransfer.setData('class','item1');

读取数据

event对象.dataTransfer.getData('属性名');
//例子：读取名字为class的数据
event对象.dataTransfer.getData('class'); 获取item1

拖拽示例

<div id="box">
        <div class="item1" draggable="true">blue</div>
    <div class="item2" draggable="true">green</div>
    <div class="item3" draggable="true">yellow</div>
</div>

<script>
    var blue = document.querySelector('.item1')
    var green = document.querySelector('.item2')
    var yellow = document.querySelector('.item3')
    // var box = document.querySelector('#box')
    // 给放置标签取消禁止放置
    green.addEventListener('dragover',cancel);
    blue.addEventListener('dragover',cancel);
    yellow.addEventListener('dragover',cancel );
//设置放置事件
    green.addEventListener('drop',dropDiv);
    blue.addEventListener('drop',dropDiv);
    yellow.addEventListener('drop',dropDiv);

// 获取拖拽标签数据
    blue.addEventListener('dragstart',setDat);
    green.addEventListener('dragstart', setDat);
    yellow.addEventListener('dragstart',setDat);
// 放置函数
    function dropDiv(e) {
        $this = $(e.target);
        var item1 = e.dataTransfer.getData('class');
        var wid=$this.css('width').replace("px","");
        var mouse=e.offsetX;
        $next = $(`.${item1}`);
        if(mouse>wid/2){
            $this.next().before($next);
            if($(this).next().length==0){
                $this.parent().append($next);
            }
        }else {
            $this.before($next);
        }
    }

  // 取消默认
function cancel(e) {
    e.preventDefault();
}

function setDat(e) {
    e.dataTransfer.setData('class', this.getAttribute('class'));
}
</script>

百度地图API使用

概述

• 百度地图提供了相应的JavaScript api 来开发地图的部分功能。可以在个人或企业应用中使用。

流程

• 注册百度的开发平台账号 https://lbsyun.baidu.com/
• 在控制台 创建一个应用。获取应用的密钥。
  • 创建应用时选择浏览器端
• 在使用地图api 的页面中通过密钥获取百度地图的使用许可。

常见操作

• 根据地址字符串进行解析在百度地图中展示
  • 百度例子：地址解析
• 设置点击事件

map.addEventListener("click", function(e){          
        alert('点击位置经纬度：' + e.latlng.lng + ',' + e.latlng.lat);
  });

• 添加标注

var point = new BMapGL.Point(104.0697601387497,30.579089691374744);
map.centerAndZoom(point, 15);
var marker = new BMapGL.Marker(point);  // 创建标注
map.addOverlay(marker);              // 将标注添加到地图中

本地存储

概念

• html5新增了用于将页面中的数据保存到本地。当页面重新打开仍可以使用保存到本地的数据。
• 新增了JavaScript api来实现数据的保存和读取
• 是用于替代以前的cookie老旧技术

分类

• 本地存储根据存储时间分为两种：localStorage和sessionStorage
  • localStorage保存期限为永久，sessionStorage为当前标签页面关闭之前，其他无区别

localStoratge & sessionStorage

• 保存数据

  localStoratge.setItem('属性名','属性值');
  sessionStoratge.setItem('属性名','属性值');
  

• 读取数据

  localStoratge.getItem('属性名');
  sessionStoratge.getItem('属性名');
  

• 删除某个数据

  localStoratge.removeItem('属性名');
  sessionStoratge.removeItem('属性名');
  

• 清空所有数据

  localStoratge.clear();
  sessionStoratge.clear();
  

本地存储保存和读取对象

• 将对象转为字符串 JSON.stringify(对象)

  var 字符串变量名  = JSON.stringify(对象变量名);
  

• 将字符串转为对象JSON.parse(字符串)

  var 对象变量名= JSON.parse(字符串);