A
AleBarquisimeto
Alfa
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
saludos tengo un script qu adjuntare mas adelante, el problema es que cuando agarro un elemento para arrastrarlo, el cursor no se fija al alemento, si muevo velozmente el cursor se puede ver que el cursor va por un lado y el elemento por otro... como podria solventar estp¿ gracias
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="../include.css" />
<title>Drag Objects from the Document to the Map (Maps API v3)</title>
<style type="text/css">
body, html { height:100%; width: 100%; }
#map {
float: left;
margin: 0 25px 10px 14px;
width: 64%;
height: 70%;
}
#desc {
float: left;
margin: 0 25px 10px 20px;
width: 10em;
}
#markers {
position:absolute;
top:140px;
left:70.4%;
width:200px;
height:110px;
}
.drag {
position: absolute;
width: 32px;
height: 32px;
}
.infowindow {
margin-top: 20px;
width: 180px;
height: 60px;
}
[MENTION=16931]medi[/MENTION]a screen and (max-width: 890px) {
body, html, #map {
margin: 0;
}
#map {
width: 100%;
height: 50%;
}
#desc {
margin: 100px 14px 0;
width: 93%;
}
.include >b {
float: right;
margin-top: 17px;
}
#markers {
/* center horizontal and do not overlap the map */
position: absolute;
top: 50%;
left: 50%;
width: 10em;
height: 6em;
margin-top: 5em;
margin-left:-5em;
}
#markers > p {
margin-top: 0;
font-size: 80%;
}
.infowindow {
margin-top: 10px;
width: 150px;
height: 25px;
}
}
</style>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&sensor=false">
</script>
<script type="text/javascript">
var map,iw,drag_area,actual,obj,mapid;
var markers = {};
var dummy,z_index=0;
function DummyOView()
{
this.setMap(map);
this.draw=function()
{
}
}
DummyOView.prototype=new google.maps.OverlayView();
function fillMarker(a)
{
var b=document.createElement("div");
b.style.backgroundImage="url("+a+")";
var c;
if(obj.id=="m1")
{
c="0px"
}
else if(obj.id=="m2")
{
c="50px"
}
else if(obj.id=="m3")
{
c="100px"
}
b.style.left=c;
b.id=obj.id;
b.className="drag";
b.onmousedown=b.ontouchstart=initDrag;
drag_area.replaceChild(b,obj);
obj=null
}
function highestOrder()
{
return z_index
}
function createDraggedMarker(e,h)
{
var f=google.maps;
var id;
var markers = {};
var i=
{
url:h,size:new f.Size(32,32),anchor:new f.Point(15,32)
};
var g=new f.Marker(
{
position:e,map:map,clickable:true,draggable:true,crossOnDrag:false,optimized:false,icon:i,zIndex:highestOrder(),animation: google.maps.Animation.DROP
});
map.panTo(e);
id = g.__gm_id;
markers[id] = g;
f.event.addListener(g,"click",function(point)
{
actual=g;
id = this.__gm_id;
alert(id);
delMarker(id);
var a=actual.getPosition().lat();
var b=actual.getPosition().lng();
var c="<div class='infowindow'>"+a.toFixed(6)+", "+b.toFixed(6)+"<\/div>";
//iw.setContent(c);
//iw.open(map,this)
}
);
f.event.addListener(g,"dragstart",function()
{
if(actual==g)iw.close();
z_index+=1;
g.setZIndex(highestOrder())
}
)
var delMarker = function (id) {
actual = markers[id];
actual.setMap(null);
}
}
function initDrag(d)
{
var l=function(a)
{
var b=
{
};
if(a&&a.touches&&a.touches.length)
{
b.x=a.touches[0].clientX;
b.y=a.touches[0].clientY
}
else
{
if(!a)var a=window.event;
b.x=a.clientX;
b.y=a.clientY
}
return b
};
var m=function(r)
{
if(obj&&obj.className=="drag")
{
var n=l(r),s=n.x-o.x,t=n.y-o.y;
obj.style.left=(obj.x+s)+"px";
obj.style.top=(obj.y+t)+"px";
obj.onmouseup=obj.ontouchend=function()
{
var a=map.getDiv(),b=a.offsetLeft,c=a.offsetTop,e=a.offsetWidth,h=a.offsetHeight;
var f=drag_area.offsetLeft,i=drag_area.offsetTop,g=obj.offsetWidth,p=obj.offsetHeight;
var j=obj.offsetLeft+f+g/2;
var k=obj.offsetTop+i+p/2;
if(j>b&&j<(b+e)&&k>c&&k<(c+h))
{
var u=1;
var v=google.maps;
var w=new v.Point(j-b-u,k-c+(p/2));
var x=dummy.getProjection();
var y=x.fromContainerPixelToLatLng(w);
document.getElementById("id").value = "Johnny Bravo";
var q=obj.style.backgroundImage.slice(4,-1).replace(/"/g,"");
createDraggedMarker(y,q);
fillMarker(q)
}
else
obj.remove();
}
}
return false
};
if(!d)var d=window.event;
obj=d.target?d.target:d.srcElement?d.srcElement:d.touches?d.touches[0].target:null;
if(obj.className!="drag")
{
if(d.cancelable)d.preventDefault();
return
}
else
{
z_index+=1;
obj.style.zIndex=z_index.toString();
obj.x=obj.offsetLeft;
obj.y=obj.offsetTop;
var o=l(d);
if(d.type==="touchstart")
{
{
}
}
else
{
document.onmousemove=m;
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
if(obj)obj=null
}
}
}
return false
}
function buildMap()
{
var a=google.maps;
var b=
{
center:new a.LatLng(52.052491,9.84375),zoom:4,mapTypeId:a.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControlOptions:
{
mapTypeIds:[a.MapTypeId.ROADMAP,a.MapTypeId.SATELLITE,a.MapTypeId.TERRAIN]
}
,panControl:false,zoomControlOptions:
{
style:a.ZoomControlStyle.SMALL
}
};
map=new a.Map(document.getElementById("map"),b);
iw=new a.InfoWindow();
a.event.addListener(map,"click",function()
{
if(iw)iw.close()
}
);
drag_area=document.getElementById("markers");
var c=drag_area.getElementsByTagName("div");
for(var e=0;
e<c.length;
e++)
{
var h=c[e];
h.onmousedown=h.ontouchstart=initDrag
}
dummy=new DummyOView()
}
window.onload=buildMap;
</script>
</head>
<body>
<h3>Drag Objects to the Map</h3>
<div id="map"></div>
<div id="markers">
<p>Drag the markers to a new location on the map</p>
<div id="m1" class="drag" style="left:0; background-image: url('http://maps.gstatic.com/mapfiles/ms/icons/ltblue-dot.png')">
</div>
<div id="m2" class="drag" style="left:50px; background-image: url('http://maps.gstatic.com/mapfiles/ms/icons/orange-dot.png')">
</div>
<div id="m3" class="drag" style="left:100px; background-image: url('http://maps.gstatic.com/mapfiles/ms/icons/pink-dot.png')">
</div>
</div>
<form >
Prueba <input id="id" type="text" name="fname"><br>
</form>
</body>
</html>
- - - Actualizado - - -
resuelto!
🙂
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, width=device-width" />
<link rel="stylesheet" type="text/css" href="../include.css" />
<title>Drag Objects from the Document to the Map (Maps API v3)</title>
<style type="text/css">
body, html { height:100%; width: 100%; }
#map {
float: left;
margin: 0 25px 10px 14px;
width: 64%;
height: 70%;
}
#desc {
float: left;
margin: 0 25px 10px 20px;
width: 10em;
}
#markers {
position:absolute;
top:140px;
left:70.4%;
width:200px;
height:110px;
}
.drag {
position: absolute;
width: 32px;
height: 32px;
}
.infowindow {
margin-top: 20px;
width: 180px;
height: 60px;
}
[MENTION=16931]medi[/MENTION]a screen and (max-width: 890px) {
body, html, #map {
margin: 0;
}
#map {
width: 100%;
height: 50%;
}
#desc {
margin: 100px 14px 0;
width: 93%;
}
.include >b {
float: right;
margin-top: 17px;
}
#markers {
/* center horizontal and do not overlap the map */
position: absolute;
top: 50%;
left: 50%;
width: 10em;
height: 6em;
margin-top: 5em;
margin-left:-5em;
}
#markers > p {
margin-top: 0;
font-size: 80%;
}
.infowindow {
margin-top: 10px;
width: 150px;
height: 25px;
}
}
</style>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB1Wwh21ce7jnB6yDbjVGN3LC5ns7OoOL4&sensor=false">
</script>
<script type="text/javascript">
var map,iw,drag_area,actual,obj,mapid;
var markers = {};
var dummy,z_index=0;
function DummyOView()
{
this.setMap(map);
this.draw=function()
{
}
}
DummyOView.prototype=new google.maps.OverlayView();
function fillMarker(a)
{
var b=document.createElement("div");
b.style.backgroundImage="url("+a+")";
var c;
if(obj.id=="m1")
{
c="0px"
}
else if(obj.id=="m2")
{
c="50px"
}
else if(obj.id=="m3")
{
c="100px"
}
b.style.left=c;
b.id=obj.id;
b.className="drag";
b.onmousedown=b.ontouchstart=initDrag;
drag_area.replaceChild(b,obj);
obj=null
}
function highestOrder()
{
return z_index
}
function createDraggedMarker(e,h)
{
var f=google.maps;
var id;
var markers = {};
var i=
{
url:h,size:new f.Size(32,32),anchor:new f.Point(15,32)
};
var g=new f.Marker(
{
position:e,map:map,clickable:true,draggable:true,crossOnDrag:false,optimized:false,icon:i,zIndex:highestOrder(),animation: google.maps.Animation.DROP
});
map.panTo(e);
id = g.__gm_id;
markers[id] = g;
f.event.addListener(g,"click",function(point)
{
actual=g;
id = this.__gm_id;
alert(id);
delMarker(id);
var a=actual.getPosition().lat();
var b=actual.getPosition().lng();
var c="<div class='infowindow'>"+a.toFixed(6)+", "+b.toFixed(6)+"<\/div>";
//iw.setContent(c);
//iw.open(map,this)
}
);
f.event.addListener(g,"dragstart",function()
{
if(actual==g)iw.close();
z_index+=1;
g.setZIndex(highestOrder())
}
)
var delMarker = function (id) {
actual = markers[id];
actual.setMap(null);
}
}
function initDrag(d)
{
var l=function(a)
{
var b=
{
};
if(a&&a.touches&&a.touches.length)
{
b.x=a.touches[0].clientX;
b.y=a.touches[0].clientY
}
else
{
if(!a)var a=window.event;
b.x=a.clientX;
b.y=a.clientY
}
return b
};
var m=function(r)
{
if(obj&&obj.className=="drag")
{
var n=l(r),s=n.x-o.x,t=n.y-o.y;
obj.style.left=(obj.x+s)+"px";
obj.style.top=(obj.y+t)+"px";
obj.onmouseup=obj.ontouchend=function()
{
var a=map.getDiv(),b=a.offsetLeft,c=a.offsetTop,e=a.offsetWidth,h=a.offsetHeight;
var f=drag_area.offsetLeft,i=drag_area.offsetTop,g=obj.offsetWidth,p=obj.offsetHeight;
var j=obj.offsetLeft+f+g/2;
var k=obj.offsetTop+i+p/2;
if(j>b&&j<(b+e)&&k>c&&k<(c+h))
{
var u=1;
var v=google.maps;
var w=new v.Point(j-b-u,k-c+(p/2));
var x=dummy.getProjection();
var y=x.fromContainerPixelToLatLng(w);
document.getElementById("id").value = "Johnny Bravo";
var q=obj.style.backgroundImage.slice(4,-1).replace(/"/g,"");
createDraggedMarker(y,q);
fillMarker(q)
}
else
obj.remove();
}
}
return false
};
if(!d)var d=window.event;
obj=d.target?d.target:d.srcElement?d.srcElement:d.touches?d.touches[0].target:null;
if(obj.className!="drag")
{
if(d.cancelable)d.preventDefault();
return
}
else
{
z_index+=1;
obj.style.zIndex=z_index.toString();
obj.x=obj.offsetLeft;
obj.y=obj.offsetTop;
var o=l(d);
if(d.type==="touchstart")
{
{
}
}
else
{
document.onmousemove=m;
document.onmouseup=function()
{
document.onmousemove=null;
document.onmouseup=null;
if(obj)obj=null
}
}
}
return false
}
function buildMap()
{
var a=google.maps;
var b=
{
center:new a.LatLng(52.052491,9.84375),zoom:4,mapTypeId:a.MapTypeId.ROADMAP,streetViewControl:false,mapTypeControlOptions:
{
mapTypeIds:[a.MapTypeId.ROADMAP,a.MapTypeId.SATELLITE,a.MapTypeId.TERRAIN]
}
,panControl:false,zoomControlOptions:
{
style:a.ZoomControlStyle.SMALL
}
};
map=new a.Map(document.getElementById("map"),b);
iw=new a.InfoWindow();
a.event.addListener(map,"click",function()
{
if(iw)iw.close()
}
);
drag_area=document.getElementById("markers");
var c=drag_area.getElementsByTagName("div");
for(var e=0;
e<c.length;
e++)
{
var h=c[e];
h.onmousedown=h.ontouchstart=initDrag
}
dummy=new DummyOView()
}
window.onload=buildMap;
</script>
</head>
<body>
<h3>Drag Objects to the Map</h3>
<div id="map"></div>
<div id="markers">
<p>Drag the markers to a new location on the map</p>
<div id="m1" class="drag" style="left:0; background-image: url('http://maps.gstatic.com/mapfiles/ms/icons/ltblue-dot.png')">
</div>
<div id="m2" class="drag" style="left:50px; background-image: url('http://maps.gstatic.com/mapfiles/ms/icons/orange-dot.png')">
</div>
<div id="m3" class="drag" style="left:100px; background-image: url('http://maps.gstatic.com/mapfiles/ms/icons/pink-dot.png')">
</div>
</div>
<form >
Prueba <input id="id" type="text" name="fname"><br>
</form>
</body>
</html>
- - - Actualizado - - -
resuelto!
🙂
