Перетаскивание изображение мышкой внутри блока jquery-ui

С помощью библиотеки jquery-ui будем реализовывать полезную задачу – перетаскивание изображения мышкой внутри блока (или другого блока).  Draggable впринципе стандартная функция  jquery-ui – настройа реализации именно с полным заполнением изображения сводиться к правильному прописанию стилей и некоторые настройки скрипта обработки.
Для начала подключаем саму библиотеку и ее стили

Далее разметка:

Стили:

И сам скрипт обработки:

 

Ну и сам результат выполнения всех пвышеперечисленных действий – теперь можно перемещать изображение (блок div) внутри другого блока с заполнением:


Ну и конечно никто не мешает поэксперементировать со стилями для подгона их под свои размеры картинок.

Работоспособность кода не вызывает сомнения – результат видно прямо на странице.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *