Перетащить фоновое изображение

Я пытаюсь разработать карту для игры. Вся карта представляет собой одно изображение размером 6000 пикселей x 6000 пикселей. Карта отображается в виде фона div (контейнера), который также равен 6000px x 6000px. Мой вопрос - это самый простой способ сделать мою карту перетаскиваемой, поэтому вы можете щелкнуть по середине экрана и просто перетащить в стороны.Перетащить фоновое изображение

Сама карта (контейнер контейнера) не должна меняться, поскольку я планирую заполнить ее POI. Мне не нужен какой-либо персонал для funcy, например zoom и т. Д., Так что пользователю не нужно использовать слайдеры на веб-странице для навигации, просто нажмите на карту и перетащите влево/вправо/вверх/вниз, чтобы переместить.

Извините, если это ответ ранее, я не смог найти ответ.

источник

2014-01-24 Gigi_Falcone

Может поможет этот вопрос: http://stackoverflow.com/ д/8569095/1741542. В противном случае вы можете посмотреть в jquery-ui draggable: http://jqueryui.com/draggable/ –

Хм я видел перетаскиваемый jqueryui, но я думаю, что он позволяет только перетаскивать div-единицы. Я проверю его немного позже, но у меня есть нулевой опыт. –

Вот минимальный пример, который позволяет перетащить изображение внутри DIV

<div id="container"> 
    <img id="draggable" src="http://lorempixel.com/800/800" /> 
</div>

#container { 
    width: 400px; 
    height: 400px; 
    overflow: hidden; 
}

$('#draggable').draggable();

Посмотреть полный JSFiddle

источник

2014-01-24 00:21:09

Эй, спасибо за ваш вклад, но это решение не будет работать с моей POI. Эта карта предназначена для игры, поэтому она будет загружать позиции игровых объектов, например, магазин caffe, который будет иметь точку на карте с координатами exampe 554,1345.99 Если карта/изображение под ней будет двигаться, точки не будут иметь pourpose/чувство. –

@ user3230057 обернуть все объекты и карту в другой div, тогда вы можете использовать это решение. – Gleno

О, так вы подразумеваете, что карта и точки движутся вместе? Умная :) –

Перетащить фоновое изображение

ответ

Смежные вопросы