内容概要
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>
var box=document.getElementById('box');
var con=document.getElementById('con');
var img=document.createElement('img');
img.src='../img/icon.png';
con.ondragstart=function(e){
e.target.className='select';
txt.innerHTML='被拖动目标为:'+e.target.alt;
e.dataTransfer.setData('text',e.target.id);
e.dataTransfer.setDragImage(img,0,0);
}
box.ondragover=function(e){
e.preventDefault();
}
box.ondrop=function(e){
var targetID=e.dataTransfer.getData('text');
this.appendChild(document.getElementById(targetID));
}
</script>
files 文件
dataTransfer.files：
如果是拖放文件，则返回正在拖放的文件列表FileList
FileReader：
专门用于读取文件，FileReader 接口提供一些读取文件的方法与一个包含读取结果的事件模型 FileReader.readAsDataURL方法：
参数为要读取的文件对象，将文件读取为DataUrl
FileReader.onload事件：
当读取文件成功完成的时候触发此事件，在事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。
例子
<script>
var box=document.getElementById('box');
box.ondragover=function(e){
e.preventDefault();
}
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>