Drag and Drop problem with IE

ChinhMai-Trung · ‎09-23-2013

Using Chrome, i succeed to console.log something when i mouse drag on a map, but not with IE , however the mouse up work well with both IE and Chrome, can someone help me?
Thanks

The attach file is what i made to test the callback :

[ATTACH=CONFIG]27671[/ATTACH]

JonathanUihlein · ‎09-23-2013

This is the file that ChinhSch attached:

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">     <title>Drag Test</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">          <style>       html, body { height: 100%; width: 100%; margin: 0;}     </style>     <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>     <script type="text/javascript">       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.addOnLoad(init);        var map;              function init() {         map = new esri.Map("map");         map.on("mouse-up", up);//Ok with IE Chrome firefox...         map.on("mouse-drag", drag);//Ok with Chrome//IE no console.log appear? //Same problem with mouse-move        }        ////////////////////////////////////////////////////////////////////////////////       // TEST        function drag() {         console.log("drag");       }       function up() {         console.log("up");       }      </script>   </head>   <body class="claro">     <div id="content" dojotype="dijit.layout.BorderContainer" style="width: 100%; height: 100%; margin: 0;">       <div id="middlePane" dojotype="dijit.layout.BorderContainer" region ="center">         <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div>       </div>     </div>   </body> </html>

The map wasn't showing up and the code was a bit messy so I cleaned up it ( and AMDified it ).

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">     <title>Drag Test</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">          <style>       html, body ,#map{ height: 100%; width: 100%; margin: 0;}     </style>  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>     <script type="text/javascript">    require([    "esri/map",    "dojo/ready",    "dojo/on",   ], function (Map, ready, on) {        ready(function () {     var map = new Map("map", {      center: [-56.049, 38.485], //longitude, latitude      zoom: 3,      basemap: "streets"     });            map.on("mouse-up", up);//Ok with IE Chrome firefox...     map.on("mouse-drag", drag);//Ok with Chrome//IE no console.log appear? //Same problem with mouse-move        function drag() {     console.log("drag");      }      function up() {     console.log("up");      }    });   });      </script>   </head>   <body class="claro">     <div id="content" dojotype="dijit.layout.BorderContainer" style="width: 100%; height: 100%; margin: 0;">         <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div>     </div>   </body> </html>

I was able to successfully fire drag events in IE9 (but not IE8 or IE10).

Using:
map.on("mouse-drag-start", drag);
map.on("mouse-drag-end", drag);

View solution in original post

JonathanUihlein · ‎09-23-2013

This is the file that ChinhSch attached:

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">     <title>Drag Test</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">          <style>       html, body { height: 100%; width: 100%; margin: 0;}     </style>     <script type="text/javascript">var djConfig = {parseOnLoad: true};</script>     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>     <script type="text/javascript">       dojo.require("dijit.layout.BorderContainer");       dojo.require("dijit.layout.ContentPane");       dojo.require("esri.map");       dojo.addOnLoad(init);        var map;              function init() {         map = new esri.Map("map");         map.on("mouse-up", up);//Ok with IE Chrome firefox...         map.on("mouse-drag", drag);//Ok with Chrome//IE no console.log appear? //Same problem with mouse-move        }        ////////////////////////////////////////////////////////////////////////////////       // TEST        function drag() {         console.log("drag");       }       function up() {         console.log("up");       }      </script>   </head>   <body class="claro">     <div id="content" dojotype="dijit.layout.BorderContainer" style="width: 100%; height: 100%; margin: 0;">       <div id="middlePane" dojotype="dijit.layout.BorderContainer" region ="center">         <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div>       </div>     </div>   </body> </html>

The map wasn't showing up and the code was a bit messy so I cleaned up it ( and AMDified it ).

<!DOCTYPE html> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10" />     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">     <title>Drag Test</title>     <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">          <style>       html, body ,#map{ height: 100%; width: 100%; margin: 0;}     </style>  <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.5"></script>     <script type="text/javascript">    require([    "esri/map",    "dojo/ready",    "dojo/on",   ], function (Map, ready, on) {        ready(function () {     var map = new Map("map", {      center: [-56.049, 38.485], //longitude, latitude      zoom: 3,      basemap: "streets"     });            map.on("mouse-up", up);//Ok with IE Chrome firefox...     map.on("mouse-drag", drag);//Ok with Chrome//IE no console.log appear? //Same problem with mouse-move        function drag() {     console.log("drag");      }      function up() {     console.log("up");      }    });   });      </script>   </head>   <body class="claro">     <div id="content" dojotype="dijit.layout.BorderContainer" style="width: 100%; height: 100%; margin: 0;">         <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div>     </div>   </body> </html>

I was able to successfully fire drag events in IE9 (but not IE8 or IE10).

Using:
map.on("mouse-drag-start", drag);
map.on("mouse-drag-end", drag);

ChinhMai-Trung · ‎09-23-2013

Thanks Jon!
I did not test with IE9...
Will also look at my code and clean it up based on your sample 🙂

Imihiro · ‎10-10-2013

I did a trial to test which document mode can fire map.on("mouse-drag");
Conclusion:
   <meta http-equiv="X-UA-Compatible" Content="IE=7"/>
   <meta http-equiv="X-UA-Compatible" Content="IE=8"/>
   <meta http-equiv="X-UA-Compatible" Content="IE=9"/>
Can Fire

   <meta http-equiv="X-UA-Compatible" Content="IE=10"/>
Can not Fire

Code:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    
    <meta http-equiv="X-UA-Compatible content="IE=10"/>    <!--mouseDrag can't be triggered-->
    <title>map.disablePan doesn't work immediately.</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css"/>
    <style>
      html,body,#mapDiv{
        padding:0;
        margin:0;
        height:100%;
      }
 #dvBind{
  position:absolute;
  background:rgb(220,220,220);
  cursor:pointer;
  z-index:2;
  left:100px;
  top:100px;
 }
    </style>
    <script src="http://js.arcgis.com/3.7/"></script>
    <script>
      var map; 
      var mouseOutHandler=null;
      var centerPt=null;
      function getDistance(ptB){             
        var ptA=centerPt.mapPoint;
        return Math.sqrt(Math.pow(ptA.x-ptB.x,2)+Math.pow(ptA.y-ptB.y,2));   
      }
      
      function bindMapDrags(){    
       map.on("mouse-drag-start",function(evt){
        console.log("dragStart triggered");
       centerPt=evt;
       });       
       map.on("mouse-drag",function(evt){
        console.log("dragging triggered");                    
        var tempRad=getDistance(evt.mapPoint); 
        console.log("radius is:"+tempRad);  
       });       
      }
      dojo.ready(function(){
       //create map and add a dynamic layer
        map = new esri.Map("mapDiv",{
          showAttribution: false         
        });       
            var imageParameters = new esri.layers.ImageParameters();
            imageParameters.format = "jpeg";            
            var dynamicMapServiceLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer", {
              "opacity":0.5, 
              "imageParameters":imageParameters
            });            
            map.addLayer(dynamicMapServiceLayer);
            bindMapDrags();
            //bind UI events. 
            document.getElementById("dvBind").onclick=function(){             
             if(mouseOutHandler==null){
              console.log("map.mouseOut is binded");
              mouseOutHandler= dojo.connect(map,"onMouseOut",function(){
                     map.disablePan();
                     console.log("map.onMouseOut is triggered. map.disablePan() is executed. However, if the left button is not released, pan the map at your will!");
                     console.log("If you know any way to STOP PAN IMMEDIATELY, leave a message, Thank you!");
                    });
             }
            };           
      });
    </script>  
  <body>
   <div id="dvBind" title="Click me to bind map.onMouseOut">Bind map.onMouseOut</div>
    <div id="mapDiv"></div>
  </body>
</html>

Hey man, you read and you never reply.
Can u make a noice here to show that you show that you are not in a cinema, but in a forum to exchange experience?

ChinhMai-Trung · ‎10-10-2013

I retest with IE=8 with a local sample , indeed it also worked, and assume it is ok with IE=7 (with ArcGIS API v 3.6 too)
and confirm that IE10 did not work.

KevinGooss · ‎10-14-2014

ever get any resolution? I'm facing the same issue - i don't get rubber band on zoom in tool with IE11