Solved! Go to Solution.
<!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>
<!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>
<!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>
<!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>
<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>
ever get any resolution? I'm facing the same issue - i don't get rubber band on zoom in tool with IE11