Перетягування зображення мишкою всередині блоку jquery-ui

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

Далі розмітка:

Стилі:

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

 

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


Ну і звичайно ніхто не заважає поексперементувати зі стилями для підгону їх під свої розміри картинок.

Працездатність коду не викликає сумніву – результат видно прямо на сторінці.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *