我們?cè)趯W(xué)習(xí)拖拽時(shí)要注意源元素、目標(biāo)元素。在拖拽的過程，通過設(shè)置源元素、目標(biāo)元素的相應(yīng)事件，才能實(shí)現(xiàn)拖拽操作。
- 源元素、源元素事件
源元素 - 要拖拽的文件
源元素事件 dragStart - 當(dāng)鼠標(biāo)開始拖放時(shí)被觸發(fā)
drag - 當(dāng)鼠標(biāo)拖放過程中被觸發(fā)
dragend - 當(dāng)鼠標(biāo)拖放結(jié)束時(shí)被觸發(fā)
- 目標(biāo)元素、目標(biāo)元素事件
目標(biāo)元素 - 要拖拽到哪里去
目標(biāo)元素事件
dragover - 當(dāng)鼠標(biāo)到達(dá)目標(biāo)元素被觸發(fā)，會(huì)反復(fù)觸發(fā)
dragenter - 當(dāng)鼠標(biāo)拖放進(jìn)入到目標(biāo)元素內(nèi)觸發(fā)
drop - 當(dāng)鼠標(biāo)實(shí)現(xiàn)拖放效果時(shí)被觸發(fā)
問題：HTML頁(yè)面默認(rèn)不允許拖放，稱之為HTML頁(yè)面的默認(rèn)行為
解決：在dragover的事件中組織默認(rèn)行為即可event.preventDefault();
dragleave - 當(dāng)鼠標(biāo)離開目標(biāo)元素時(shí)觸發(fā)
- dataTransfer對(duì)象
作用：類似于window系統(tǒng)的剪切板功能
功能：可以將源元素的信息，存儲(chǔ)在這里，提供給目標(biāo)元素
使用：
使用事件對(duì)象獲取到dataTransfer對(duì)象
var trans = event.dataTransfer;
設(shè)置數(shù)據(jù):
setData(type,data)方法
type:類型，特指標(biāo)識(shí)(id)，一般為字符串
data:設(shè)置的數(shù)據(jù)內(nèi)容
獲取數(shù)據(jù): getData(type);
清除數(shù)據(jù): clearData(type)
所有的數(shù)據(jù)內(nèi)容，存儲(chǔ)在瀏覽器內(nèi)存中，當(dāng)使用完數(shù)據(jù)內(nèi)容時(shí)，要清除
事件對(duì)象 - 作為事件處理函數(shù)的參數(shù)存在, DOM底層代碼的默認(rèn)寫法就是event,如果直接使用event就可以不穿event參數(shù)，這種寫法不標(biāo)準(zhǔn)
- 從本地拖拽文件到頁(yè)面中
var transfer = event.dataTransfer;
//找到拖拽的文件
var file = transfer.files[0];
//新建文件讀取對(duì)象
var reader = new FileReader();
//讀取文件
reader.readAsDataURL(file);
//讀取完以后加載
reader.onload = function(){
d1.innerHTML = "<img src"+reader.result+">";
}
從本地拖拽過來一個(gè)文件，然后兩個(gè)div，能夠左右拖拽
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
<script type="text/javascript">
var divs=document.querySelectorAll("div");
//從本地拖拽一個(gè)文件到div中
//給每個(gè)div設(shè)置dragover,drop事件，將拖拽的圖片復(fù)制到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();//給復(fù)制來的img設(shè)置dragstart事件
//重新給兩個(gè)div設(shè)置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("開始移動(dòng)"+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("移動(dòng)之后"+moveimg);
myimg= document.getElementsByTagName("img")[0];//img被清空了，需要給現(xiàn)在的img設(shè)置dragstart事件
myimg.ondragstart= myDragStart;
trans.clearData();
}
function myDragover(){
event.preventDefault();
}
}
}
</script>
定位
1. 定位 - 地球的經(jīng)度和緯度的相交點(diǎn)
2. 實(shí)現(xiàn)定位的方式
1）GPS - 美國(guó)，衛(wèi)星定位
2）北斗定位 - 純國(guó)產(chǎn)，慣性定位和衛(wèi)星定位
3) 基站定位 - 移動(dòng)運(yùn)營(yíng)商創(chuàng)建基站(提供信號(hào)源)
4）基于互聯(lián)網(wǎng) - IP地址(PC端和移動(dòng)端)
5）很多瀏覽器都具有定位功能
3. HTML5中的定位
1）地理定位功能并不是屬于HTML5專有內(nèi)容
2）HTML5的定位技術(shù)，是由Google公司提供的,Google Map
3) 由于國(guó)內(nèi)不能使用谷歌的產(chǎn)品，所以國(guó)內(nèi)使用百度地圖和高德地圖
應(yīng)用百度地圖API定位方法：
1）創(chuàng)建應(yīng)用，獲取秘鑰
創(chuàng)建應(yīng)用
獲取秘鑰
2）查看實(shí)例demo
點(diǎn)擊實(shí)例demo
地圖展示demo
3）遇到不懂的方法屬性查看類參考
類參考
類參考主頁(yè)
實(shí)例： 點(diǎn)擊地圖，出現(xiàn)大頭針，點(diǎn)擊大頭針，出現(xiàn)一個(gè)覆蓋物，顯示中文位置
<!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); // 創(chuàng)建信息窗口對(duì)象
map.openInfoWindow(infoWindow,e.point); //開啟信息窗口
map.addOverlay(marker);
});
}
}
</script>
</body>
</html>
定位
