我们在学习拖拽时要注意源元素、目标元素。在拖拽的过程，通过设置源元素、目标元素的相应事件，才能实现拖拽操作。
- 源元素、源元素事件
源元素 - 要拖拽的文件
源元素事件 dragStart - 当鼠标开始拖放时被触发
drag - 当鼠标拖放过程中被触发
dragend - 当鼠标拖放结束时被触发
- 目标元素、目标元素事件
目标元素 - 要拖拽到哪里去
目标元素事件
dragover - 当鼠标到达目标元素被触发，会反复触发
dragenter - 当鼠标拖放进入到目标元素内触发
drop - 当鼠标实现拖放效果时被触发
问题：HTML页面默认不允许拖放，称之为HTML页面的默认行为
解决：在dragover的事件中组织默认行为即可event.preventDefault();
dragleave - 当鼠标离开目标元素时触发
- dataTransfer对象
作用：类似于window系统的剪切板功能
功能：可以将源元素的信息，存储在这里，提供给目标元素
使用：
使用事件对象获取到dataTransfer对象
var trans = event.dataTransfer;
设置数据:
setData(type,data)方法
type:类型，特指标识(id)，一般为字符串
data:设置的数据内容
获取数据: getData(type);
清除数据: clearData(type)
所有的数据内容，存储在浏览器内存中，当使用完数据内容时，要清除
事件对象 - 作为事件处理函数的参数存在, DOM底层代码的默认写法就是event,如果直接使用event就可以不穿event参数，这种写法不标准
- 从本地拖拽文件到页面中
var transfer = event.dataTransfer;
//找到拖拽的文件
var file = transfer.files[0];
//新建文件读取对象
var reader = new FileReader();
//读取文件
reader.readAsDataURL(file);
//读取完以后加载
reader.onload = function(){
d1.innerHTML = "<img src"+reader.result+">";
}
从本地拖拽过来一个文件，然后两个div，能够左右拖拽
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
<script type="text/javascript">
var divs=document.querySelectorAll("div");
//从本地拖拽一个文件到div中
//给每个div设置dragover,drop事件，将拖拽的图片复制到div中
for(var i=0;i<2;i++){
divs[i].ondragover = function(event){
event.preventDefault();
}
divs[i].ondrop = function(event){
var transfer = event.dataTransfer;
var file = transfer.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
var div12=this;
reader.onload = function(){
div12.innerHTML = '';
move();//给复制来的img设置dragstart事件
//重新给两个div设置dragover和drop事件
}
event.preventDefault();
}
}
function move() {
for(var i=0;i<2;i++){
var myimg= document.getElementsByTagName("img")[0];
myimg.ondragstart= myDragStart;
divs[i].ondrop = myDrop;
divs[i].ondragover = myDragover;
var temp;
function myDragStart(event){
var myData = myimg.src;
var trans = event.dataTransfer;
trans.setData("text",myData);
temp=this.parentNode;
moveimg=this;
console.log("开始移动"+myimg);
}
function myDrop(event){
var trans = event.dataTransfer;
var mysrc = trans.getData("text");
console.log(mysrc);
this.innerHTML = "";
temp.innerHTML="";
console.log(this);
console.log("移动之后"+moveimg);
myimg= document.getElementsByTagName("img")[0];//img被清空了，需要给现在的img设置dragstart事件
myimg.ondragstart= myDragStart;
trans.clearData();
}
function myDragover(){
event.preventDefault();
}
}
}
</script>
定位
1. 定位 - 地球的经度和纬度的相交点
2. 实现定位的方式
1）GPS - 美国，卫星定位
2）北斗定位 - 纯国产，惯性定位和卫星定位
3) 基站定位 - 移动运营商创建基站(提供信号源)
4）基于互联网 - IP地址(PC端和移动端)
5）很多浏览器都具有定位功能
3. HTML5中的定位
1）地理定位功能并不是属于HTML5专有内容
2）HTML5的定位技术，是由Google公司提供的,Google Map
3) 由于国内不能使用谷歌的产品，所以国内使用百度地图和高德地图
应用百度地图API定位方法：
1）创建应用，获取秘钥
创建应用
获取秘钥
2）查看实例demo
点击实例demo
地图展示demo
3）遇到不懂的方法属性查看类参考
类参考
类参考主页
实例： 点击地图，出现大头针，点击大头针，出现一个覆盖物，显示中文位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地图大头针覆盖</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的秘钥"></script>
</head>
<body>
<div id="allmap" style="width:600px;height:600px;"></div>
<script type="text/javascript">
var map= new BMap.Map("allmap");
map.centerAndZoom("南昌",13);
map.onclick=function(e){
var marker = new BMap.Marker(e.point);
marker.addEventListener("click",attribute)
map.addOverlay(marker);
function attribute(e) {
var geoc = new BMap.Geocoder();
geoc.getLocation(e.point, function(rs){
var addComp = rs.addressComponents;
var detail=addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
var opts = {
width : 100,
height: 50,
enableMessage:true
}
var infoWindow = new BMap.InfoWindow(detail, opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,e.point); //开启信息窗口
map.addOverlay(marker);
});
}
}
</script>
</body>
</html>
定位
网友评论