Dragging a large image in a div, how to do it?

Question

JavaScript

Hello everyone, there is a large picture map of the village.
On top of it, svg coordinates of houses are applied (when hovering, the roof changes color).
Now, in order to navigate the map, you need to use the horizontal and vertical scroll of the browser, this is very inconvenient.
Please tell me how to make it so that the map, along with the svg elements applied to it, can be dragged simply with the mouse (by analogy with Yandex / Google maps).

The code structure is this: jsfiddle.net/qa8vexdn

Answer 1

https://www.google.ru/search?q=javascript+drag+pan...
first link
codepen.io/JTParrett/pen/rkofB just add touch events.
second link https://asvd.github.io/dragscroll/

Answer 2

add the whole thing to some div, give it a limited width | height and position relative, and to the inner block position absolute , then you can make it so that top and left change when you hover the mouse))
In the code, everything is too lazy to write

Answer 3

Try to implement it with SVG.js or Raphael.js