Перетаскивание большого изображение в блоке div, как это сделать?

Question

[Капитан Какао]

Всем привет, есть большая картинка карта посёлка.
По верх неё нанесены svg координаты домов (при наведении крыша меняет цвет).
Сейчас что бы перемещаться по карте, нужно юзать горизонтальный и вертикальный скролл браузера, это очень не удобно.
Подскажите пожалуйста, как сделать так, что бы карту вместе с нанесённым на неё svg элементами можно было таскать просто мышкой (по аналогии яндекс/гугл карт).

Структура кода такая: jsfiddle.net/qa8vexdn

Answer 1

[Александр Таратин]

https://www.google.ru/search?q=javascript+drag+pan...
первая ссылка
codepen.io/JTParrett/pen/rkofB только тач события добавьте.
вторая ссылка https://asvd.github.io/dragscroll/

Comments

[Капитан Какао]

Спасибо!!! dragscroll это как раз то что и нужно было!)

[Капитан Какао]

Александр Таратин, скажи пожалуйста, а в этом dragscroll можно сделать так, что бы на мобильном телефоне/планшете, в общем на устройствах с сенсорным экраном, можно было перетаскивать изображение пальцем?

[Александр Таратин]

Rad Cor: Можно.

[Капитан Какао]

Александр Таратин: не подскажешь как?)

[Капитан Какао]

Александр Таратин: уже не нужно. Решил по другому, при уменьшении сайта до мобильной версии, отключаю скрипт dragscroll, и область с overflow:hidden меняю на overflow:auto, и оно пальцем на телефоне скролится)

Answer 2

[IceJOKER]

добавляете все это дело в какой-нибудь div, задаете ему ограниченные width | height и position relative, а внутреннему блоку position absolute , далее можно сделать так чтобы при наведении мышки менялись top и left ))
В коде все писать лень

Answer 3

[Максим Мартиросов]

Попробуйте реалезовать это с помощью SVG.js или Raphael.js

Comments

[Александр Таратин]

Зачем???

[Максим Мартиросов]

Затем, что это можно будет реализовать несколькими строчками кода. Ссылку на рафаель, указал как раз на тот метод который это реализует. У каждого есть право выбора, мой ответ не претендует на истину.