I have world map chart. Now i need dragging functionality

Question

Hi Everyone, I have world map chart. Now i need dragging functionality when i want to drag the map using cursor it should do the work. Give code for that Thank you

Simran Verma · Answer

World Map with Dragging #map { width: 100%; height: 500px; border: 1px solid #ccc; } // 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.