系列文章目录
拖放
拖放（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>
拖放
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>
位置没获取到：
扫描二维码关注公众号，回复：
14413246 查看本文章
百度位置：
<!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>
不积跬步无以至千里 不积小流无以成江海
点个关注不迷路，持续更新中…