Как сделать такую область?

Question

[WQP]

Имеется блок(A) (он выделен черной рамкой) внутри этого блока(B) имеется ещё один блок размером 3000х3000, подскажите плагин который даст возможность перемещаться по блоку B чтобы он не выходил за пределы A.

О чём речь https://yadi.sk/d/DWcuC30qwpQ3E (для примера сделал прозрачные края у блока B, чтобы было понятнее)

Принцип действия как у яндекс карт

Comments

[Максим]

а при чём jquery и javascript ?

[WQP]

Максим Жаров: ну а с помощью чего дать возможность перемещаться по блоку?

Answer 1

[WQP]

Нашел ровно то что искал. Спасибо всем кто ответил.

https://github.com/timmywil/jquery.panzoom

Answer 2

[TekVanDo]

Простой вариант, блоку А задать overwlow: scroll (появятся 2 скролла). Либо если нужно перемешаться с помощью драга можно использовать например https://skidding.github.io/dragdealer/

Comments

[WQP]

Забыл добавить. Принцип действия как у яндекс карт

[TekVanDo]

dragdealer вполне подойдет, нужно будет реализовать зум, но я думаю это не сложно

[Андрей Б.]

WQP https://skidding.github.io/dragdealer/#demos так вот же в демо в самом конце то что вам нужно

Answer 3

[Алекс Глебов]

professorweb.ru/my/javascript/jquery/level4/4_12.php

Comments

[WQP]

Забыл добавить. Принцип действия как у яндекс карт

Answer 4

[Андрей Б.]

codepen.io/anon/pen/qaympZ

Comments

[Kovalsky]

Кстати и правда ведь достаточно драга с контролем положения элемента

[Андрей Б.]

Никита Полевой Ну да, единственное косяк в том что драг не отключается когда уже видны границы картинки< пустоты получаются. Думаю это решаемо.

Answer 5

[Kovalsky]

Если я правильно вас понял, то для этого есть дико крутой и мощный leaflet.js