Ensure IE/Edge compatibility for routing drag&drop
authorMormegil <mormegil@centrum.cz>
Thu, 27 Oct 2016 10:34:07 +0000 (12:34 +0200)
committerMormegil <mormegil@centrum.cz>
Thu, 27 Oct 2016 10:34:07 +0000 (12:34 +0200)
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

app/assets/javascripts/index/directions.js

index a141045..2a1e045 100644 (file)
@@ -302,10 +302,14 @@ OSM.Directions = function (map) {
   });
 
   $(".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 = {};
@@ -321,7 +325,8 @@ OSM.Directions = function (map) {
     $("#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);