HTML5 —— 拖放、地理位置、视频和音频的基本使用
导读：拖放拖放（Drag 和 drop）即抓取对象以后拖到另一个位置，是 HTML5 标准的组成部分。注：使元素可拖动，把 draggable 属性设置为 trueondragstart 属性调用了一个函数，drag(event ，它规定了被拖动...
拖放
拖放（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>
不积跬步无以至千里 不积小流无以成江海
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5 —— 拖放、地理位置、视频和音频的基本使用
本文地址： https://pptw.com/jishu/312734.html