What are the ways to drag and drop svg image in js?

Question

JavaScript

I'm breaking my head on how the enlarged svg image can be moved in the browser. Maybe there is a function or a way?
I have a heavy circuit, like a whole map that I need to zoom in and move.
Here's what I did:

var leftArrow        = 37;	// The numeric code for the left arrow key.
    var upArrow          = 38;
    var rightArrow       = 39;
    var downArrow        = 40;
    var panRate          = 10;	// Number of pixels to pan per key press.    
    var zoomRate         = 1.1;	// Must be greater than 1. Increase this value for faster zooming (i.e., less granularity).
    var x;
    var y;
    /* Globals: */
    var theSvgElement;
    
    function processKeyPress(evt)
    {
      var viewBox = theSvgElement.getAttribute('viewBox');	// Grab the object representing the SVG element's viewBox attribute.
      var viewBoxValues = viewBox.split(' ');				// Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).

      viewBoxValues[0] = parseFloat(viewBoxValues[0]);		// Convert string "numeric" values to actual numeric values.
      viewBoxValues[1] = parseFloat(viewBoxValues[1]);
      
      switch (evt.keyCode)
      {
        case leftArrow:
          viewBoxValues[0] += panRate;	// Increase the x-coordinate value of the viewBox attribute to pan right.
          break;
        case rightArrow:
          viewBoxValues[0] -= panRate;	// Decrease the x-coordinate value of the viewBox attribute to pan left.
          break;
        case upArrow:
          viewBoxValues[1] += panRate;	// Increase the y-coordinate value of the viewBox attribute to pan down.
          break;
        case downArrow:
          viewBoxValues[1] -= panRate;	// Decrease the y-coordinate value of the viewBox attribute to pan up.      
          break;                         
      } // switch
      
      theSvgElement.setAttribute('viewBox', viewBoxValues.join(' '));	// Convert the viewBoxValues array into a string with a white space character between the given values.
    }
    function drag(evt) {
    ev.dataTransfer.setData('svg-id', evt.target.id);
}
    function zoom(zoomType)
    {
      var viewBox = theSvgElement.getAttribute('viewBox');	// Grab the object representing the SVG element's viewBox attribute.
      var viewBoxValues = viewBox.split(' ');				// Create an array and insert each individual view box attribute value (assume they're seperated by a single whitespace character).

      viewBoxValues[2] = parseFloat(viewBoxValues[2]);		// Convert string "numeric" values to actual numeric values.
      viewBoxValues[3] = parseFloat(viewBoxValues[3]);
      
      if (zoomType == 'zoomIn')
      {
        viewBoxValues[2] /= zoomRate;	// Decrease the width and height attributes of the viewBox attribute to zoom in.
        viewBoxValues[3] /= zoomRate;	
      }
      else if (zoomType == 'zoomOut')
      {
        viewBoxValues[2] *= zoomRate;	// Increase the width and height attributes of the viewBox attribute to zoom out.
        viewBoxValues[3] *= zoomRate;	
      }
      else
        alert("function zoom(zoomType) given invalid zoomType parameter.");
      
      theSvgElement.setAttribute('viewBox', viewBoxValues.join(' '));	// Convert the viewBoxValues array into a string with a white space character between the given values.
      
      var currentZoomFactor = svgViewBoxWidth / viewBoxValues[2];										// Calculates the current zoom factor, could have just as easily used svgViewBoxHeight.      
      var newText = document.createTextNode("Current zoom factor = " + currentZoomFactor.toFixed(3));	// Create a generic new text node object.
      var parentNode = document.getElementById('currentZoomFactorText');  								// Get the parent node of the text node we want to replace.
      
      parentNode.replaceChild(newText, parentNode.firstChild);  // Replace the first child text node with the new text object.
    }
        
    function zoomViaMouseWheel(mouseWheelEvent)
    {      
      if (mouseWheelEvent.wheelDelta > 0)
        zoom('zoomIn');
      else
        zoom('zoomOut');
        
      /* When the mouse is over the webpage, don't let the mouse wheel scroll the entire webpage: */
      mouseWheelEvent.cancelBubble = false;	
      return false;							
    } 
  
    function initialize()
    {        
      /* Add event listeners: */
      window.addEventListener('keydown', processKeyPress, true);		// OK to let the keydown event bubble.
      window.addEventListener('mousewheel', zoomViaMouseWheel, false);	// Don't let the mousewheel event bubble up to stop native browser window scrolling.
        	  
      /* Set a global variable and detect if the browser supports SVG: */
      theSvgElement = document.getElementById('svg-id');			// Best to only access the SVG element after the page has fully loaded.
     
   document.addEventListener("drag", function( event ) {

  }, false);
  
      if(theSvgElement.namespaceURI != "http://www.w3.org/2000/svg")	// Alert the user if their browser does not support SVG.
        alert("Inline SVG in HTML5 is not supported. This document requires a browser that supports HTML5 inline SVG.");
            
      /* For the svg element, specifically set the viewBox attribute's width and height values in that one of them will be used to calculate the current scaling factor. */
      theSvgElement.setAttribute('viewBox', "0 0 " + svgViewBoxWidth + " " + svgViewBoxHeight);	
    }

Answer 1

It's called drag&drop
https://yandex.ru/search/?text=drug%26drop%20js&cl...

Answer 2

It's more like pan and zoom.