Drag&&Drop
一、概述
- 拖放的目的可以将某个对象放置到你想要放的位置
- 拖放是一种常见的特性,比如在微信聊天室可以直接将文件或图片拖入输入框来发送信息。
二、拖放实例
export class DrogDragComponent implements OnInit {
allowDrop(event:any){
event.preventDefault();
}
drag(event:any){
event.dataTransfer.setData("Text",event.target.id);
}
drop(event:any){
event.preventDefault();
var data=event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
}
constructor() { }
ngOnInit(): void {
}
}
<div class="container">
<p>拖动图片到矩形框中:</p >
<div id="div1" on-drop="drop($event)" on-dragover="allowDrop($event)"></div>
<br>
<img id="drag1" draggable="true" on-dragstart="drag($event)" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1588063396822&di=b99ef7a68db3bb6509536f0f198fa536&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-10-30%2F59f68513a33ca.jpg">
</div>
解释:
1.首先得设置元素是可拖放的:draggable="true";
<img draggable="true">
2.你想拖动什么然后那个元素就得设置两个函数
1.ondragstart()
2.setData()
在拖动元素时触发ondragstart属性调用drag(event)函数,它规定了被拖动的数据。
dataTransfer.setData()方法设置了被拖放的数据类型与值,在上面这个例子,数据类型是“Text”,值是可拖动元素的id("drag1").
3.默认的,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们就必须使用event.preventDefault()来阻止对元素的默认处理方式。
4.当释放鼠标时调用ondrop事件。
1.必须阻止使用默认处理方式,event.preventDefault();
2.通过event.dataTransfer.getData("Text");获得被拖动的数据。该方法将返回在setData()方法中设置为相同类型的任何数据。
3.在这个例子,被拖动数据是被拖动元素的id("drag1")
4.把被拖动元素追加到目标元素中
*在拖动目标上触发事件
1.ondragstart--用户开始拖动元素时触发
2.ondrag--元素正在拖动时触发
3.ondragend--用户完成拖动后触发
*释放目标时触发的事件
1.ondragenter--当被鼠标拖动的对象进入其容器范围内时触发的事件
2.ondragover--当某一个被拖动的对象在另一个对象容器范围内拖动时触发此事件
3.ondragleave--当被鼠标拖动的对象离开其容器范围内时触发的事件
4.在一个拖动过程中,释放鼠标时触发此事件
效果:
实例二:实现来回拖动p元素
export class TestComponent implements OnInit {
dragStart(event:any){
event.dataTransfer.setData("Text",event.target.id);
document.getElementById("show").innerHTML="开始拖动元素";
}
drop(event:any){
event.preventDefault();
var data=event.dataTransfer.getData("Text");
console.log(event.target);
event.target.appendChild(document.getElementById(data));
}
dragEnd(event:any){
document.getElementById("show").innerHTML="拖动完成";
}
allowDrop(event:any){
event.preventDefault();
}
constructor() { }
ngOnInit(): void {
}
}
<div class="container">
<p>在两个矩形中来回拖动p元素</p>
<div class="dropTarget" on-drop="drop($event)" on-dragover="allowDrop($event)">
<p on-dragstart="dragStart($event)" on-dragend="dragEnd($event)" draggable="true" id="dragTarget">有本事把拖我过去啊</p>
</div>
<div class="dropTarget" on-drop="drop($event)" on-dragover="allowDrop($event)"></div>
<br>
<p id="show"></p>
</div>
.container{
margin-top:150px;
margin-left:700px;
}
.dropTarget{
width:100px;
height:65px;
margin:15px;
border: 1px solid #aaaaaa;
}
效果:
Geolocation(地理定位)
一、概述
- Geolocation用于定位用户的位置。
- Geolocation通过请求一个位置信息,用户同意后,浏览器会返回一个包含经度和维度的位置信息。
- 由于该特性时触碰到用户的隐私,因此需要得到用户的同意。
- 该定位是应用美国的GPS。
- 可以用于GPS,IP地址,WIFI和蓝牙的MAC地址等
二、
- HTML5提供的方法
一、getCurrentPosition()获取用户的位置
函数原型:getCurrentPosition(successCallback: PositionCallback, errorCallback?: PositionErrorCallback, options?: PositionOptions): void
1.coords.latitude:十进制数的维度
2.coords.longitude:十进制数的经度
3.coords.accuracy:位置精度
4.coords.altitude:海拔,海平面以上以百米计
5.coords.altitudeAccuracy:位置海拔精度
6.coords.heading:方向,从正北开始以度计
7.coords.speed:速度,以米/每秒计
8.timestamp:响应的日期/时间
二、watchPosition()返回用户当前位置,并继续返回用户移动的更新位置,就像导航一样
三、clearWatch()停止watchPosition()方法
三、使用地理位置简单示例
<html5>
<div class="container">
<p id="show">获取地理位置</p>
<input class="button" type="button" (click)="getLocation()" value="位置">
</div>
export class GeolocationComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
getLocation(){
var obj=document.getElementById("show");
if(navigator.geolocation){//判断浏览器是否兼容定位
obj.innerHTML="该浏览器支持地理定位,正在追踪位置";
navigator.geolocation.getCurrentPosition(this.showPosition,this.showError)
}else{
obj.innerHTML="该浏览器不支持HTML5的地理位置!";
}
}
showPosition(position){//getCurrentPosition()成功的回调,则返回一个coordinates对象,即position
var obj=document.getElementById("show");
obj.innerHTML="纬度:"+position.coords.latitude+"<br> 经度:"+position.coords.longitude;
}
showError(error){//getCurrentionPosition()错误的回调,
var obj=document.getElementById("show");
switch(error.code)
{
case error.PERMISSION_DENIED:
{
obj.innerHTML="用户拒绝对获取地理位置的请求。"
break;}
case error.POSITION_UNAVAILABLE:
{
obj.innerHTML="位置信息是不可用的。"
break;}
case error.TIMEOUT:
{
obj.innerHTML="请求用户地理位置超时。"
break;}
case error.UNKNOWN_ERROR:
{
obj.innerHTML="未知错误。"
break;}
}
}
}
四、使用静态图像在谷歌地图中显示位置
export class GeolocationComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
getLocation(){
var obj=document.getElementById("show");
if(navigator.geolocation){//判断浏览器是否兼容定位
obj.innerHTML="该浏览器支持地理定位,正在追踪位置";
navigator.geolocation.getCurrentPosition(this.showPosition,this.showError)
}else{
obj.innerHTML="该浏览器不支持HTML5的地理位置!";
}
}
showPosition(position){//getCurrentPosition()成功的回调,则返回一个coordinates对象,即position
var obj=document.getElementById("show");
obj.innerHTML="纬度:"+position.coords.latitude+"<br> 经度:"+position.coords.longitude;
var xx=position.coords.latitude+","+position.coords.longitude;
var imgSrc="http://maps.googleapis.com/maps/api/staticmap?center="+xx+"&zoom=14&size=400x300&sensor=false";
document.getElementById("map").innerHTML=`<img src=${imgSrc}>`;
}
showError(error){
var obj=document.getElementById("show");
switch(error.code)
{
case error.PERMISSION_DENIED:
{
obj.innerHTML="用户拒绝对获取地理位置的请求。"
break;}
case error.POSITION_UNAVAILABLE:
{
obj.innerHTML="位置信息是不可用的。"
break;}
case error.TIMEOUT:
{
obj.innerHTML="请求用户地理位置超时。"
break;}
case error.UNKNOWN_ERROR:
{
obj.innerHTML="未知错误。"
break;}
}
}
}
报告错误原因:请求被拒接,The Google Maps Platform server rejected your request. You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account