- Mensajes
- 17
- Puntuación de reacción
- 0
saludos, tengo un problema con el cursor, cuando arrastro el elemento el cursor no se fija a el, es decir si lo muevo velozmente se puede ver como el cursor va por un lado y el elemto va por otro.... busco es fijar el cursor al elemento, adjunto el codigo...
<!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;
}
@media 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>
<!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;
}
@media 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>