Put marker at exact position user dragged it to

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 0a11b489989f67dbf7a2133a80c0137e4f26b45c..178ed761173cd3b8efe9d965763b85907095c9d1 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -359,8 +359,10 @@ $(document).ready(function () {
     $("#map").on('dragend dragover',function(e) { e.preventDefault(); });
     $("#map").on('drop',function(e) { OSM.routing.handleDrop(e); e.preventDefault(); });
     $(".routing_marker").on('dragstart',function(e) {
     $("#map").on('dragend dragover',function(e) { e.preventDefault(); });
     $("#map").on('drop',function(e) { OSM.routing.handleDrop(e); e.preventDefault(); });
     $(".routing_marker").on('dragstart',function(e) {

-    e.originalEvent.dataTransfer.effectAllowed = 'move';
+      e.originalEvent.dataTransfer.effectAllowed = 'move';

       e.originalEvent.dataTransfer.setData('id', this.id);
       e.originalEvent.dataTransfer.setData('id', this.id);

+      e.originalEvent.dataTransfer.setData('offsetX', e.originalEvent.target.width/2 - (e.originalEvent.x-e.target.x));
+      e.originalEvent.dataTransfer.setData('offsetY', e.originalEvent.target.height  - (e.originalEvent.y-e.target.y));

     });
   });
 
     });
   });
 

diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb
index 204606005b2c1142f58f06cbb675b54ea2c93781..c774928b9346dcb11ed1474adbb08810dfdff18f 100644 (file)
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -115,9 +115,12 @@ OSM.Routing=function(map,name,jqSearch) {
        // Drag and drop markers
        
        r.handleDrop=function(e) {
        // Drag and drop markers
        
        r.handleDrop=function(e) {

-               var id=e.originalEvent.dataTransfer.getData('id');
-               var ll=r.map.mouseEventToLatLng(e.originalEvent);
-               // *** ^^^ this is slightly off - we need to work out the latLng of the tip
+               var oe=e.originalEvent;
+               var id=oe.dataTransfer.getData('id');
+               var pt=L.DomEvent.getMousePosition(oe,map.getContainer());      // co-ordinates of the mouse pointer at present
+               pt.x+=Number(oe.dataTransfer.getData('offsetX'));
+               pt.y+=Number(oe.dataTransfer.getData('offsetY'));
+               var ll=map.containerPointToLatLng(pt);

                r.createMarker(ll,id);
                r.setNumericInput(ll,id);
                r.requestRoute(true, false);
                r.createMarker(ll,id);
                r.setNumericInput(ll,id);
                r.requestRoute(true, false);