Ensure IE/Edge compatibility for routing drag&drop

Use the DataTransfer interface properly, using the `text` format, as
IE/Edge does not support much more. We can JSON-serialize anything
there, even though right now, only a single string would be enough.

Also, IE does not support .setDragImage, so check for support prior
to calling.

Fixes #1343

diff --git a/app/assets/javascripts/index/directions.js b/app/assets/javascripts/index/directions.js
index a141045a3da13141d0b075f09303f654ee2a3f77..2a1e045dae4efc2bf61a5c5c75ce80ac54849f65 100644 (file)
--- a/app/assets/javascripts/index/directions.js
+++ b/app/assets/javascripts/index/directions.js
@@ -302,10 +302,14 @@ OSM.Directions = function (map) {
   });
 
   $(".routing_marker").on('dragstart', function (e) {
   });
 
   $(".routing_marker").on('dragstart', function (e) {

-    e.originalEvent.dataTransfer.effectAllowed = 'move';
-    e.originalEvent.dataTransfer.setData('type', $(this).data('type'));
-    var img = $("<img>").attr("src", $(e.originalEvent.target).attr("src"));
-    e.originalEvent.dataTransfer.setDragImage(img.get(0), 12, 21);
+    var dt = e.originalEvent.dataTransfer;
+    dt.effectAllowed = 'move';
+    var dragData = { type: $(this).data('type') };
+    dt.setData('text', JSON.stringify(dragData));
+    if (dt.setDragImage) {
+      var img = $("<img>").attr("src", $(e.originalEvent.target).attr("src"));
+      dt.setDragImage(img.get(0), 12, 21);
+    }

   });
 
   var page = {};
   });
 
   var page = {};


@@ -321,7 +325,8 @@ OSM.Directions = function (map) {
     $("#map").on('drop', function (e) {
       e.preventDefault();
       var oe = e.originalEvent;
     $("#map").on('drop', function (e) {
       e.preventDefault();
       var oe = e.originalEvent;

-      var type = oe.dataTransfer.getData('type');
+      var dragData = JSON.parse(oe.dataTransfer.getData('text'));
+      var type = dragData.type;

       var pt = L.DomEvent.getMousePosition(oe, map.getContainer());  // co-ordinates of the mouse pointer at present
       pt.y += 20;
       var ll = map.containerPointToLatLng(pt);
       var pt = L.DomEvent.getMousePosition(oe, map.getContainer());  // co-ordinates of the mouse pointer at present
       pt.y += 20;
       var ll = map.containerPointToLatLng(pt);