H5拖拽drag

我们在学习拖拽时要注意源元素、目标元素。在拖拽的过程，通过设置源元素、目标元素的相应事件，才能实现拖拽操作。

• 源元素、源元素事件

源元素 - 要拖拽的文件

源元素事件   dragStart - 当鼠标开始拖放时被触发
            drag - 当鼠标拖放过程中被触发
            dragend - 当鼠标拖放结束时被触发

• 目标元素、目标元素事件

目标元素 - 要拖拽到哪里去

目标元素事件
           dragover - 当鼠标到达目标元素被触发，会反复触发
           dragenter - 当鼠标拖放进入到目标元素内触发
           drop - 当鼠标实现拖放效果时被触发

 问题：HTML页面默认不允许拖放，称之为HTML页面的默认行为
 解决：在dragover的事件中组织默认行为即可event.preventDefault();
        dragleave - 当鼠标离开目标元素时触发

• dataTransfer对象

   作用：类似于window系统的剪切板功能
   功能：可以将源元素的信息，存储在这里，提供给目标元素

   使用：
             使用事件对象获取到dataTransfer对象
             var trans = event.dataTransfer;

   设置数据:
            setData(type,data)方法
            type:类型，特指标识(id)，一般为字符串
            data:设置的数据内容

   获取数据:  getData(type);
              
   清除数据: clearData(type) 
   所有的数据内容，存储在浏览器内存中，当使用完数据内容时，要清除

   事件对象 - 作为事件处理函数的参数存在, DOM底层代码的默认写法就是event,如果直接使用event就可以不穿event参数，这种写法不标准

• 从本地拖拽文件到页面中

           var transfer = event.dataTransfer;
        
            //找到拖拽的文件
            var file = transfer.files[0];
        
            //新建文件读取对象
            var reader = new FileReader();
        
            //读取文件
            reader.readAsDataURL(file);
            
            //读取完以后加载
            reader.onload = function(){
            
              d1.innerHTML = "";
            }

从本地拖拽过来一个文件，然后两个div，能够左右拖拽

---

定位

   1. 定位 - 地球的经度和纬度的相交点

   2. 实现定位的方式

     1）GPS - 美国，卫星定位
     2）北斗定位 - 纯国产，惯性定位和卫星定位
     3) 基站定位 - 移动运营商创建基站(提供信号源)
     4）基于互联网 - IP地址(PC端和移动端)
     5）很多浏览器都具有定位功能

   3. HTML5中的定位

     1）地理定位功能并不是属于HTML5专有内容

     2）HTML5的定位技术，是由Google公司提供的,Google Map
     
     3) 由于国内不能使用谷歌的产品，所以国内使用百度地图和高德地图

应用百度地图API定位方法：
1）创建应用，获取秘钥

创建应用

获取秘钥

2）查看实例demo

点击实例demo

地图展示demo

3）遇到不懂的方法属性查看类参考

类参考

类参考主页

实例： 点击地图，出现大头针，点击大头针，出现一个覆盖物，显示中文位置

定位