@smithana

Как задать границы перетасиквания картинки для jquery плагина draggble?

Добрый день,

нужно реализовать возможность прокручивать (перетаскивать мышкой) большую картинку во всех направлениях в границах небольшого блока.
Мне понравился 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 не удалось это реализовать, т.к. окно результата у них не уменьшается. Поэтому закинул тестовым файлом.
Кстати в хроме в режиме мобильного устройства всё ок.

Вот по последнему пункту пока нет ни одной идеи или зацепки.
Опять же буду рад любым здравым мыслям.

Спасибо!
  • Вопрос задан
  • 309 просмотров
Решения вопроса 1
@smithana Автор вопроса
В общем всё оказалось просто)

старайтесь не называть свои переменные простыми именами, которые могут быть уже заняты фреймворками.
в тестовом приме со стека границы хранятся в переменных left, top, right, bottom.
Так вот почему-то во многих браузерах глючила переменная top.

Переименовал их на varLeft, varTop, varRight, varBottom и всё заработало. Даже на мобильных устройствах.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
daager
@daager
https://jsfiddle.net/4qq6rcbg/
На SO понятно же написали.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы