Javascript Нажмите и перетащите функцию

Question

Я пытаюсь построить интерактивную карту, и я ищу информацию о том, как сделать щелчок и перетащить в одном окне, повлиять на изображение в родительском окне.

Поскольку это трудно объяснить, если вы посетите http://liamg.co.uk/map/map.html, вы увидите маленькое окно / карту в левом верхнем углу, я хотел бы иметь возможность перетаскивать небольшое окно вокруг карты и иметь это перемещение больше / увеличено изображение, имеет ли это смысл?

Любая информация / помощь с благодарностью!

Спасибо

Answer 1

jquery поддерживает перетаскивание n выпадающих элементов, см. Здесь: http://jqueryui.com/demos/draggable/ Вы должны установить правильные границы, а затем добавить событие, которое выполняется при отбрасывании, в котором вы будете читать положение отброшенного элемента, а затем сможете применить его к карте, как хотите.

Правильный пример, который вам нужен: http://jqueryui.com/demos/draggable/constrain-movement.html

Первый в поле имеет границы окна.

И здесь вы видите, как реагирует на падение: http://jqueryui.com/demos/draggable/events.html

Answer 2

Я думаю, что вам нужно не просто событие перетаскивания, вам нужен элемент, перемещающийся только внутри маленькой карты, да?

Позвольте мне объяснить:

1- Добавить слушателя внаведите курсор мыши вверх, вниз и переместитесь на эту маленькую карту;

2 - Когда флаг mousedown имеет значение true, перемещение мыши работает, изменяя положение квадратного делителя вокруг маленькой карты (показывая, какую часть изображения видит пользователь).Используйте pageX и Y (координаты);

3- Сделайте математику по размеру части div и размеру большого переполненного полной картой, чтобы показать точно увеличенную часть карты.

Я полагаю, что перетаскивание действительно реализуется, когда вы перемещаетесь по всему документу или используете событие удаления.Но это то, что я думаю.