Question

I’m working with a Google Maps example code , this : http://www.wolfpil.de/v3/drag-from-outside.html which has 3 draggable markers outside the map. All I want is to use the revert ‘invalid’ option to make the markers return to the original position in case the markers do not drop in the map but I’ve failed to put it in the right line. Could you please give me a hint where do I have to put it to make it work?

function initDrag(e) {

 if(!e) var e = window.event;

  // Drag image's parent div element
 obj = e.target ? e.target.parentNode : e.srcElement.parentElement;
  if(obj.className != "drag") {
  if(e.cancelable) e.preventDefault();
    obj = null;
  return;
 }

if (obj) {
 // The currently dragged object always gets the highest z-index
 z_index++;
 obj.style.zIndex = z_index.toString();

   xpos = e.clientX - obj.offsetLeft;
 ypos = e.clientY - obj.offsetTop;

 document.onmousemove = moveObj;
}
 return false;
 }


function moveObj(e) {

if(obj && obj.className == "drag") {

  if(!e) var e = window.event;
   obj.style.left = e.clientX - xpos + "px";
  obj.style.top = e.clientY - ypos + "px";

  obj.onmouseup = function() {

  var gd = map.getDiv();
  var mLeft = gd.offsetLeft;
  var mTop = gd.offsetTop;

  var mWidth = gd.offsetWidth;
  var mHeight = gd.offsetHeight;

  var areaLeft = drag_area.offsetLeft;
  var areaTop = drag_area.offsetTop;

  var oWidth = obj.offsetWidth;
  var oHeight = obj.offsetHeight;

  // The object's pixel position relative to the document
  var x = obj.offsetLeft + areaLeft + oWidth/2;
  var y = obj.offsetTop + areaTop + oHeight/2;

  // Check if the cursor is inside the map div
  if (x > mLeft && x < (mLeft + mWidth) && y > mTop && y < (mTop + mHeight)) {

// Difference between the x property of iconAnchor
// and the middle of the icon width
var anchorDiff = 1;

// Find the object's pixel position in the map container
var g = google.maps;
var pixelpoint = new g.Point(x - mLeft -anchorDiff, y - mTop + (oHeight/2));

// Corresponding geo point on the map
var proj = dummy.getProjection();
var latlng = proj.fromContainerPixelToLatLng(pixelpoint);

// Create a corresponding marker on the map
var src = obj.firstChild.getAttribute("src");
createDraggedMarker(latlng, src);

// Create dragged marker anew
fillMarker();
   }
   };
   }
   return false;
   }


 function fillMarker() {

var m = document.createElement("div");
m.style.position = "absolute";
m.style.width = "32px";
m.style.height = "32px";

 var left;
 if (obj.id == "m1") {
 left = "0px";
 } else if (obj.id == "m2") {
 left = "50px";
 } else if (obj.id == "m3") {
  left = "100px";
 }
 m.style.left = left;

 // Set the same id and class attributes again
// m.setAttribute("id", obj.id);
// m.setAttribute((document.all?"className":"class"), "drag");
 m.id = obj.id;
 m.className = "drag";

  // Append icon
 var img = document.createElement("img");
 img.src = obj.firstChild.getAttribute("src");
 img.style.width = "32px";
   img.style.height = "32px";
 m.appendChild(img);
 drag_area.replaceChild(m, obj);

 // Clear initial object
 obj = null;
 }


 function highestOrder() {

/**
* The currently dragged marker on the map
* always gets the highest z-index too
*/
 return z_index;
}


 function createDraggedMarker(point, src) {

var g = google.maps;
var image = new g.MarkerImage(src,
  new g.Size(32, 32),
  new g.Point(0, 0),
  new g.Point(15, 32));

  var shadow = new g.MarkerImage("http://maps.gstatic.com/mapfiles/kml/paddle/A_maps.shadow.png",
  new g.Size(59, 32),
  new g.Point(0, 0),
  new g.Point(15, 32));

  var marker = new g.Marker({ position: point, map: map,
    clickable: true, draggable: true,
    raiseOnDrag: false,
    icon: image, shadow: shadow, zIndex: highestOrder()
  });

  g.event.addListener(marker, "click", function() {
  actual = marker;
  var lat = actual.getPosition().lat();
  var lng = actual.getPosition().lng();

   iw.setContent(lat.toFixed(6) + ", " + lng.toFixed(6));
   iw.open(map, this);
   });

   g.event.addListener(marker, "dragstart", function() {
  // Close infowindow when dragging the marker whose infowindow is open
  if (actual == marker) iw.close();
  // Increment z_index
   z_index++;
   marker.setZIndex(highestOrder());
       });
           }

Answer 1

After the code snippet

fillMarker();
}

add an else statement like this:

fillMarker();
} else {
  //if the marker does not land on the map reset marker location
  var left;
  if (obj.id == "m1") {
    left = "0px";
  } else if (obj.id == "m2") {
    left = "50px";
  } else if (obj.id == "m3") {
    left = "100px";
  }
   obj.style.left = left;
   obj.style.top = "70px";
}

jsFiddle to full code: http://jsfiddle.net/6ECVs/