拖拽元素:添加了draggable="true" 属性即可实现拖拽,除了默认支持拖拽的元素(图片,链接)
目标元素:拖拽元素的放置位置,任意元素都可以设置为目标元素
支持事件
拖拽元素
ondrag 应用于拖拽元素，整个拖拽过程都会调用
ondragstart 应用于拖拽元素，当拖拽开始时调用
ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用
ondragend 应用于拖拽元素，当拖拽结束时调用
目标元素
ondragenter 应用于目标元素，当拖拽元素进入时调用
ondragover 应用于目标元素，当停留在目标元素上时调用
ondrop 应用于目标元素，当在目标元素上松开鼠标时调用
ondragleave 应用于目标元素，当鼠标离开目标元素时调用
使用注意:
如果想要调用ondrop事件,必须在ondragover中使用事件参数阻止浏览器的默认行为
thirdBox.ondragover = function (argument) {
// 在 ondragover时 必须阻止默认行为 才能够 看到拖放效果
argument.preventDefault();
}
读取文件
读取文件需要使用js对象FileReader
基础语法
var reader = new FileReader; //实例化一个对象
reader.readAsDataURL(this.files[0]) //以DataURL形式读取文件 获取的值可以用在任意通过链接指定的地方
// 通过onload事件监测加载完毕
reader.onload = function (){
// result 就是我们需要的结果
console.log(this.result);
//可以用在指定连接地址的元素中比如
// 设置图片
document.querySelector('#img').src = this.result;
// 设置图像
document.querySelector("#video").src= this.result;
// 设置CSS
document.querySelector("#link").href = this.result;
}
Web存储
虽然我们可以使用cookie保存微量数据,但是由于容量太小,且读取不便,HTML5推出了新的解决方案
使用特点
设置读取方便(通过键值对)
容量较大,sessionStorage大约5m,localStorage大约20m
如果要保存json数据,可以使用JSON.stringify()将对象编码后保存
window.sessionStorage
生命周期为关闭浏览器窗口
在同一个窗口下数据可以共享
window.localStorage
永久生效，除非手动删除
可以多窗口共享
使用方法
两种存储方式,只是前缀不同,调用方法是一致的
setItem(key, value) 设置存储内容
getItem(key) 读取存储内容
removeItem(key) 删除键值为key的存储内容
clear() 清空所有存储内容
key(n) 以索引值来获取存储内容
全屏
基础语法
requestFullScreen() 开启全屏显示
cancleFullScreen() 关闭全屏显示
使用注意:
不同浏览器需要添加前缀如：
webkitRequestFullScreen、mozRequestFullScreen
webkitCancleFullScreen、mozCancleFullScreen
兼容性写法
在代码中进行判断,选用存在的属性,这里是让按钮作为全拼显示的内容
document.querySelector('input[type=button]').onclick = function (event) {
if (this.requestFullScreen) {
this.requestFullScreen();
}else if(this.webkitRequestFullScreen){
this.webkitRequestFullScreen();
}
else if(this.mozRequestFullScreen){
this.mozRequestFullScreen();
}
}
地图,位置服务
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即基于位置服务 (Location Base Service)
navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。
navigator.geolocation.getCurrentPosition(function(position){
// 定位成功会调用该方法
// position.coords.latitude 纬度
// position.coords.longitude 经度
// position.coords.accuracy 精度
// position.coords.altitude 海拔高度
}, function(error){
// 定位失败会调用该方法
// error 是错误信息
}, )