I have world map chart. Now i need dragging functionality

// Get reference to the SVG element
const svg = document.getElementById('map');

// Define initial translation values
let translateX = 0;
let translateY = 0;

// Function to handle mouse down event
function handleMouseDown(event) {
  // Update initial translation values
  translateX = event.clientX;
  translateY = event.clientY;

  // Add event listeners for mouse move and mouse up events
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
}

// Function to handle mouse move event
function handleMouseMove(event) {
  // Calculate the distance moved
  const dx = event.clientX - translateX;
  const dy = event.clientY - translateY;

  // Update translation values
  translateX = event.clientX;
  translateY = event.clientY;

  // Apply translation to the SVG element
  svg.setAttribute('transform', `translate(${dx}, ${dy})`);
}

// Function to handle mouse up event
function handleMouseUp() {
  // Remove event listeners for mouse move and mouse up events
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
}

// Add event listener for mouse down event
svg.addEventListener('mousedown', handleMouseDown);

This code creates a simple world map chart using SVG and allows you to drag it around by clicking and dragging with the mouse. The map will move according to the cursor movement. You can adjust the styles and dimensions as needed.