HTML5拖放&地理定位

内容概要

1.JS原生拖放与HTML5拖放的区别

2.拖放常用属性及事件

3.dataTransfer对象的属性及方法

4.HTML5地理定位

　　API

　　百度地图API

一、JS原生拖放与HTML5拖放的区别

原生 JS 拖拽效果的缺点

　　1. 代码相对复杂与冗余

　　2. 仅限于在浏览器内的元素间拖放

　　3. 不能实现跨页面的拖放

与 JS 原生相比 HTML5 拖放的优势

1. HTML5 提供专门的拖放与播放的 API

2. 触发多个事件，可控制鼠标的形状与移动时的效果。
浏览器支持

　　Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

　　注：在 Safari 5.1.2 中不支持拖放。
创建拖放对象
draggable 属性
通过 draggable 告诉浏览器哪些元素需要实现拖拽功能。
有三个可选值：

　　true：元素可以被拖拽

　　false：元素不能被拖拽

　　auto：浏览器自己判断元素是否能被拖拽 ( 默认 )
对象拖放事件

dragstart：按下鼠标键并开始移动时触发

drag：在元素拖拽过程中持续触发

dragend：元素拖拽停止时触发
上述三个事件的目标都是被拖动的元素。
对象拖放事件流程

投放区事件流程

元素被拖动到有效的放置目标时，下列事件会依次发生：
1. dragenter：当拖拽对象进入投放区时触发

2. dragover ：拖拽对象在投放区内移动时持续触发

3. dragleave：元素被拖出了投放区时触发

4. drop ：拖拽对象投放在投放区时触发
虽然所有元素都支持放置目标事件，但这些元素默认是不允许放置的，需要重写事件的默认行为，例如：

在ondragover中一定要执行 preventDefault() 否则ondrop事件不会被触发

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#con,#box{
400px;
height: 150px;
margin: 50px auto 0;
padding: 10px;
border:2px solid red;
}
#con img,#box img{
100px;
height: 100px;
margin: 10px;
}
.select{
border:3px solid green;
}
#txt{
font-size: 20px;
color: blue;
text-align: center;
margin: 50px 0 0 ;
}
</style>
</head>
<body>
<div id="con">
<img src="../img/03.jpg" alt="tu1" draggable="true">
<img src="../img/06.jpg" alt="tu2" draggable="true">
<img src="../img/08.jpg" alt="tu3" draggable="true">
</div>
<h1 id="txt">被拖动目标为:</h1>
<div id="box">

</div>
<script>
var box=document.getElementById('box');
var con=document.getElementById('con');
var i=null;
con.ondragstart=function(e){
　　i=e.target;
　　e.target.className='select';
　　txt.innerHTML='被拖动目标为:'+i.alt;
}
box.ondragover=function(e){
e.preventDefault();
}
box.ondrop=function(e){
box.appendChild(i);
}

</script>
</body>
</html>

dataTransfer对象方法
dataTransfer 对象（在event中）
　　该对象专门用于携带拖放过程中的数据
dataTransfer 对象--常用方法
　　setData ( 数据格式，数据 )
　　　　将拖放元素的数据存入dataTransfer对象中
　　getData ( 数据格式 )
　　　　读取存入dataTransfer对象中的数据
数据格式常用值为“Text”或“URL”

dataTransfer对象属性

注意

dropEffect属性搭配effectAllowed属性使用

在dragstart事件处理程序中设置effectAllowed属性

在dragover事件处理程序中设置dropEffect属性

dropEffect 的每个可能值都会导致光标显示为不同的符号

举个例子

dataTransfer

</script>

files 文件

　　dataTransfer.files：

　　　　如果是拖放文件，则返回正在拖放的文件列表FileList

　　FileReader：

　　　　专门用于读取文件，FileReader 接口提供一些读取文件的方法与一个包含读取结果的事件模型　　　　　　　FileReader.readAsDataURL方法：

　　　　参数为要读取的文件对象，将文件读取为DataUrl

　　FileReader.onload事件：

　　　　当读取文件成功完成的时候触发此事件，在事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。

例子

box.ondrop=function(e){
　　e.preventDefault();
　　// console.log(e.dataTransfer.files[0]);
　　var f=e.dataTransfer.files[0];
　　var fr=new FileReader();
　　fr.readAsDataURL(f);
　　fr.onload=function(e){
　　　　console.log(e);
　　　　var url=e.target.result;
　　　　box.innerHTML+='<img src="'+url+'" alt="">';
　　}

}
</script>

Geolocation地理定位

Geolocation API 用于获得用户的地理位置

地理位置

　　经度 : 南北极的连接线

　　纬度 : 东西连接的线

　　位置信息从何而来

　　　　IP地址

　　　　GPS全球定位系统

　　　　Wi-Fi无线网络

　　　　基站

getCurrentPosition() 方法
PS：单次定位请求

getCurrentPosition( 1成功fn，2失败fn，{3数据收集} )

1请求成功函数(必须的参数) fn(pos){}

经度 : coords.longitude 纬度 : coords.latitude

准确度 : coords.accuracy 海拔 : coords.altitude

海拔准确度 : coords.altitudeAccuracy

行进方向 : coords.heading

地面速度 : coords.speed

时间戳 : new Date(pos.timestamp)

2请求失败函数：fn(error){}

　　0 : 不包括其他错误编号中的错误

　　1 : 用户拒绝浏览器获取位置信息

　　 2 : 尝试获取用户信息，但失败了

　　 3 : 设置了timeout值，获取位置超时了

3数据收集 : (json的格式)

　　 enableHighAcuracy : 更精确的查找，默认false 、

　　timeout : 超时时间（毫秒），默认infinity

　　 maximumAge : 指定缓存时间（毫秒），默认0
watchPosition() 方法

watchPosition( 1成功fn，2失败fn，{3数据收集} )

PS：多次定位请求

移动设备常用，位置改变会触发

配置参数：frequency 更新的频率

关闭更新请求 : clearWatch() 方法

百度地图API
百度地图接口文档：

1.http://lbsyun.baidu.com/

2.web开发--Javascript API

3. 左边菜单--获取密钥（ak）

4. 复制保存‘访问应用（AK）’即‘密钥

’ 5. 选择地图类型

6. 复制代码

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#txt,#btn{
font-size: 20px;
color: red;
}
</style>
</head>
<body>
<textarea name="" id="txt" cols="60" rows="20"></textarea>
<button id="btn">请求</button>
<script>
var btn=document.getElementById('btn');
var txt=document.getElementById('txt');
btn.onclick=function(){
　　var geo=navigator.geolocation;
　　geo.getCurrentPosition(function(pos){
　　txt.value+='经度：'+pos.coords.longitude+' ';
　　txt.value+='纬度：'+pos.coords.latitude+' ';
　　txt.value+='精确度:'+pos.coords.accuracy+' ';
　　txt.value+='海拔:'+pos.coords.altitude+' ';
　　txt.value+='海拔精确度:'+pos.coords.altitudeAccuracy+' ';
　　txt.value+='行进方向:'+pos.coords.heading+' ';
　　txt.value+='地面速度:'+pos.coords.speed+' ';
　　txt.value+='时间戳:'+new Date(pos.timestamp);
},function(error){
　　alert(error.code+''+error.message);//错误代码//错误信息
},{
　　enableHighAcuracy:true,
　　timeout:10000,
　　maximumAge:1000*60

});

}
</script>
</body>
</html>

百度地图定位：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html{ 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#allmap {
800px;
height: 500px;
border:1px solid red;
margin: 50px auto 0;

}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=soHloI8mSD7pxAcbuF9DRUaUOyomqhlT"></script>
<title>地图展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地图API功能
var geo=navigator.geolocation;
geo.getCurrentPosition(function(pos){
var map = new BMap.Map("allmap");
var point = new BMap.Point(pos.coords.longitude, pos.coords.latitude);
map.centerAndZoom(point, 15);
var marker = new BMap.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
},function(error){
alert(error.code+''+error.message);//错误代码//错误信息
},{
enableHighAcuracy:true,
timeout:10000,
maximumAge:1000*60

});

</script>