前端学习笔记——牛客网学习记录(5)_HTML进阶之三：HTML5 拖放（Drag 和 Drop）、HTML5 Geolocation（地理定位）
三、HTML进阶
3.7、HTML5 拖放（Drag 和 Drop）
在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。
举例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>牛客教程(nowcoder.com)</title> <style type="text/css"> #div1 { width:350px; height:70px; padding:10px; border:1px solid #aaaaaa; } </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </head> <body> <p>拖动图片到矩形框中:</p> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br> <img id="drag1" src="x.png" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>
方法：
1、设置元素为可拖放
首先，为了使元素可拖动，把 draggable 属性设置为 true ：
<img draggable="true">
2、拖动什么 - ondragstart 和 setData()
然后，规定当元素被拖动时，会发生什么。
举例说明：
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值：
function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }
Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型，值是可拖动元素的 id ("drag1")。
3、放到何处 - ondragover
ondragover 事件规定在何处放置被拖动的数据。
默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。
这要通过调用 ondragover 事件的 event.preventDefault() 方法：
event.preventDefault()
4、进行放置 - ondrop
当放置被拖数据时，会发生 drop 事件。
在上面的例子中，ondrop 属性调用了一个函数，drop(event)：
function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); }
代码解释：
-
-
-
调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
-
通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
-
被拖数据是被拖元素的 id ("drag1")
-
把被拖元素追加到放置元素（目标元素）中
-
-
3.8、HTML5 Geolocation（地理定位）
HTML5 Geolocation（地理定位）用于定位用户的位置。
定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
浏览器支持
Internet Explorer 9+, Firefox, Chrome, Safari 和 Opera 均支持Geolocation（地理定位）。
注意: Geolocation（地理定位）对于拥有 GPS 的设备，比如 iPhone，地理定位更加精确。
HTML5 - 使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
下例是一个简单的地理定位实例，可返回用户位置的经度和纬度：
var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; }
实例解析
-
-
-
检测是否支持地理定位
-
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
-
如果 getCurrentPosition() 运行成功，则向参数 showPosition 中规定的函数返回一个 coordinates 对象
-
showPosition() 函数获得并显示经度和纬度
-
-
这是一个非常基础的地理定位脚本，不含错误处理。
处理错误和拒绝
getCurrentPosition() 方法的第二个参数用于处理错误，它规定当获取用户位置失败时运行的函数。
function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML="用户拒绝对获取地理位置的请求。" break; case error.POSITION_UNAVAILABLE: x.innerHTML="位置信息是不可用的。" break; case error.TIMEOUT: x.innerHTML="请求用户地理位置超时。" break; case error.UNKNOWN_ERROR: x.innerHTML="未知错误。" break; } }
错误代码：
-
-
-
Permission denied - 用户不允许地理定位
-
Position unavailable - 无法获取当前位置
-
Timeout - 操作超时
-
-
在地图中显示结果
如需在地图中显示结果，您需要访问可使用经纬度的地图服务，比如谷歌地图或百度地图。
function showPosition(position){ var latlon=position.coords.latitude+","+position.coords.longitude; var img_url="http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML="<img src='"+img_url+"'>"; }
在上例中，我们使用返回的经纬度数据在谷歌地图中显示位置（使用静态图像）。
给定位置的信息
地理定位对于给定位置的信息同样很有用处。
实例:
-
-
-
更新本地信息
-
显示用户周围的兴趣点
-
交互式车载导航系统 (GPS)
-
-
getCurrentPosition() 方法 - 返回数据
T若成功，则 getCurrentPosition() 方法返回对象。始终会返回 latitude、longitude 以及 accuracy 属性。如果可用，则会返回其他下面的属性。
| 属性 | 描述 |
|---|---|
| coords.latitude | 十进制数的纬度 |
| coords.longitude | 十进制数的经度 |
| coords.accuracy | 位置精度 |
| coords.altitude | 海拔，海平面以上以米计 |
| coords.altitudeAccuracy | 位置的海拔精度 |
| coords.heading | 方向，从正北开始以度计 |
| coords.speed | 速度，以米/每秒计 |
| timestamp | 响应的日期/时间 |
Geolocation 对象 - 其他有趣的方法
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法。
下面的例子展示 watchPosition() 方法，您需要一台精确的 GPS 设备来测试该例（比如 iPhone）。
var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.watchPosition(showPosition); } else { x.innerHTML="该浏览器不支持获取地理位置。"; } } function showPosition(position) { x.innerHTML="纬度: " + position.coords.latitude + "<br>经度: " + position.coords.longitude; }
