topic Mouse-Drag will initiate without clicking first on the map in ArcGIS JavaScript Maps SDK Questions

Mouse-Drag will initiate without clicking first on the map

GiovanniMarrero3 — Fri, 31 Aug 2018 18:10:58 GMT

I have several buttons that select graphics and re-symbolizes the graphics depending on what button the user presses. The way the graphics are selected is by using a mouse-drag on the graphics layer. When pressing on the 1st button, it waits until I press down on the map before it starts the drag. I have another function that listens for a mouse-up to stop the drag. The problem is when I select the other buttons, the drag starts immediately. I need the drag to start when I press down on the map. Is this a normal functionality of the mouse-drag? As a side note, once the mouse-up function activates and I pan around the map, the buttons work as they should (the drag waits for the button click). How can I get the mouse-drag to listen for a mouse-click before immediately firing?

I tried putting a mouse-down before the mouse-drag but the functionality of the map gave me issues. I used stopPropagation() as detailed in over forums.

Using Javascript API 3.23

Re: Mouse-Drag will initiate without clicking first on the map

RobertScheitlin__GISP — Fri, 31 Aug 2018 18:15:19 GMT

Sounds like you are not removing existing listeners.

Re: Mouse-Drag will initiate without clicking first on the map

GiovanniMarrero3 — Sat, 11 Dec 2021 08:44:27 GMT

I tried that in several different ways. Below is an excerpt from the file.

map.addLayers([blocks, schoolGL]);

        dom.byId("SchoolsButton1").onclick = executeSchool1;     
        dom.byId("SchoolsButton2").onclick = executeSchool2;
          

        function clearEvts() {
          if (executeSchool1Evt) {
            executeSchool1Evt.remove();
          }
          if (executeSchool2Evt) {
            executeSchool2Evt.remove();
          }
        }

        function doPreEvents() {
          clearEvts();
          map.disableClickRecenter();
            map.disablePan();
          map.disableShiftDoubleClickZoom();
            map.disableDoubleClickZoom();
          map.disableKeyboardNavigation();
          map.disableRubberBandZoom();
        }

        function undoPreEvents() {
          clearEvts();
          //map.enableClickRecenter();
            map.enablePan();
          map.enableShiftDoubleClickZoom();
          map.enableKeyboardNavigation();
          map.enableRubberBandZoom();
            //map.off();
        }
          
          function removeHandler() {
          dom.byId("SchoolsButton1").removeEventListener("click", executeSchool1Evt);
            dom.byId("SchoolsButton2").removeEventListener("click", executeSchool2Evt);
        }

          map.on("mouse-up", function(){
               undoPreEvents();
               removeHandler();
               console.log("Mouse Up");
          });
          
        function executeSchool1() {
          doPreEvents();
            executeSchool1Evt = on(blocks, "mouse-drag", function(e) {
               gra = e.graphic.clone();
               gra.attributes.ES_Num = 1;
               //gra.setSymbol(sSymbol1);
               schoolGL.add(gra);
               calculatePopES();
               e.stopPropagation();
            });
            //dom.byId("SchoolsButton1").removeEventListener("mouseup", executeSchool1Evt);
        }

        function executeSchool2() {
          doPreEvents();
            executeSchool2Evt = on(blocks, "mouse-drag", function(e) {
               gra = e.graphic.clone();
               gra.attributes.ES_Num = 2;
               //gra.setSymbol(sSymbol2);
               schoolGL.add(gra);
               calculatePopES();
               e.stopPropagation();
            });
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Mouse-Drag will initiate without clicking first on the map

GiovanniMarrero3 — Sat, 11 Dec 2021 08:44:29 GMT

For anyone wondering, I found another way to stop the mouse-drag initiating before the mouse-click on the map. Add another variable for the mouse down on the graphic and later remove the variable when done by double clicking.

map.on("dbl-click", function(event){
               undoPreEvents();
               map.setMapCursor("default");
               document.getElementById("popup1").style.display = "none";
               dojo.stopEvent(event);
               event.preventDefault();
               event.stopPropagation();
               console.log("Mouse Up");          
          });

          
        function executeSchool1() {
            document.getElementById("popup2").style.display = "block";     
            doPreEvents();
            map.setMapCursor("url('images/yellow_crayon.cur'), auto");
            executeSchool1EvtMouse = on(blocks, "mouse-down", function() {     
               document.getElementById("popup1").style.display = "block"; 
               executeSchool1Evt = on(blocks, "mouse-move", function(e) {
                    gra = e.graphic.clone();
                    gra.attributes.ES_Num = 1;
                    //gra.setSymbol(sSymbol1);
                    schoolGL.add(gra);
                    calculatePopES(); 
                    document.getElementById("popup2").style.display = "none";
               });
            });     
          }

function executeSchool2(evt) {
          document.getElementById("popup2").style.display = "block";     
            doPreEvents();
            map.setMapCursor("url('images/green_crayon.cur'), auto");
            executeSchool2EvtMouse = on(blocks, "mouse-down", function() {     
               document.getElementById("popup1").style.display = "block"; 
               executeSchool2Evt = on(blocks, "mouse-move", function(e) {
                    gra = e.graphic.clone();
                    gra.attributes.ES_Num = 2;
                    //gra.setSymbol(sSymbol2);
                    schoolGL.add(gra);
                    calculatePopES(); 
                    document.getElementById("popup2").style.display = "none";
               });
            });     
          }

function clearEvts() {
          if (executeSchool1Evt) {
            executeSchool1Evt.remove();
               executeSchool1EvtMouse.remove();
          }
          if (executeSchool2Evt) {
            executeSchool2Evt.remove();
               executeSchool2EvtMouse.remove();               
          }
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍