nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Drag and Drop problem with IE

ChinhMai-Trung

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]

DragPB.zip

Finde mehr Beiträge mit dem Tag

Accepted answers

JonathanUihlein

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);

All comments

KevinGooss

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

ChinhMai-Trung

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.

Imihiro

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

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

JonathanUihlein

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);

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.