拖放
拖放（Drag 和 drop）即抓取对象以后拖到另一个位置，是 HTML5 标准的组成部分。
注：
使元素可拖动，把 draggable 属性设置为 true
ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。
dataTransfer.setData() 方法设置被拖数据的数据类型和值
Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id (“drag1”)。
ondragover 事件规定在何处放置被拖动的数据。默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置要通过调用 ondragover 事件的 event.preventDefault() 方法阻止对元素的默认处理方式
当放置被拖数据时，会发生 drop 事件。
dataTransfer.getData(“Text”) 方法获得被拖的数据
把被拖元素追加到放置元素（目标元素）中
（drop 事件的默认行为是以链接形式打开）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> #div1, #div2 { float:left; width:100px; height:100px; margin:10px; padding:10px; border:1px solid #aaaaaa; } </style> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="xxx.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="88"></div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); let data = ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script> </body> </html>
https://www.bilibili.com/video/BV1hF411N7yE?t=1.2
拖放
Geolocation（地理定位）
Geolocation API 用于获得用户的地理位置。
注：
getCurrentPosition() 方法来获得用户的位置
coords.latitude 表示十进制的纬度
coords.longitude 表示十进制数的经度
错误代码：
Permission denied - 用户不允许地理定位
Position unavailable - 无法获取当前位置
Timeout - 操作超时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="demo">获取坐标</p> <button onclick="getLocation()">点我</button> <script> let x = document.getElementById("demo") function getLocation() { if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError) } else { x.innerHTML = "该浏览器不支持获取地理位置" } } function showPosition(position) { x.innerHTML = '纬度：' + position.coords.latitude + '<br>经度：' + position.coords.longitude } 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; } } </script> </body> </html>
位置没获取到：
百度位置：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!--引入百度 API，"ak=" 后面一串码是密钥，最好自己申请--> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=7a6QKaIilZftIMmKGAFLG7QT1GLfIncg"></script> </head> <body> <div id="position"></div><br> <input type="button" onclick="getLocation()" value="点我" /> <script type="text/javascript"> var x = document.getElementById('position'); function getLocation() { // 创建百度地理位置实例，代替 navigator.geolocation var geolocation = new BMap.Geolocation(); geolocation.getCurrentPosition(function(e) { if(this.getStatus() == BMAP_STATUS_SUCCESS){ // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude x.innerHTML = '纬度：' + e.point.lat + '<br/>经度：' + e.point.lng; } else { x.innerHTML = 'failed' + this.getStatus(); } }); } </script> </body> </html>
位置成功获取：
Video 视频
注：controls：向用户显示控件，比如播放按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <video src="xxx.mp4" width="320" height="240" controls></video> </body> </html>
Audio 音频
audio：音频
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <audio src="xxx.mp3" width="320" height="240" controls></audio> </body> </html>
不积跬步无以至千里 不积小流无以成江海
