Добрый день,
нужно реализовать возможность прокручивать (перетаскивать мышкой) большую картинку во всех направлениях в границах небольшого блока.
Мне понравился jquery плагин draggble:
https://jqueryui.com/draggable/
Вот я его прикинул:
https://jsfiddle.net/wsrxjfdr/
Всё бы хорошо, но есть один минус, я могу перетащить картинку далеко за рамки дива и там её оставить. Обратно я её уже вытащить не смогу. Значит нужно как-то ограничить рамки перетаскивания.
У draggable есть параметр containment. Но я пытался указать parent, пытался задать параметры x1, y1, x2, y2, но во всех случаях указания containment картинка начинает дёргаться жутко.
Нашёл вот такие примеры ограничения:
www.pureexample.com/jquery-ui/draggable-containmen...
grantm.github.io/jquery-udraggable/examples/option...
но они работают только если перетаскиваемый блок/картинка меньше родителя.
Также нашёл вот эту тему:
stackoverflow.com/questions/5279558/jquery-ui-drag...
но применить на деле не смог. До сих пор пытаюсь вникнуть.
Буду рад любым идеям.
Спасибо.
обновление:
Спасибо большое
Нурлан, за то, что оживил пример, но к сожалению вскрылось куча косяков, поэтому снял отметку о решении.
и так:
1. draggble Не работает на мобильных устройствах.
Эту проблему помогает решить
jQuery UI Touch Punch
2. Нужна функция пересчёта переменных left, top, right, bottom при изменении размера окна браузера
не критичная проблема, в процессе.
3. Самая серьёзная проблема. На мобильных устройствах картинка перетаскивается только вверх и вниз. Влево и вправо она перетаскивается буквально на миллиметр. На jsfiddle не удалось это реализовать, т.к. окно результата у них не уменьшается. Поэтому закинул
тестовым файлом.
Кстати в хроме в режиме мобильного устройства всё ок.
Вот по последнему пункту пока нет ни одной идеи или зацепки.
Опять же буду рад любым здравым мыслям.
Спасибо!
Простой