Как ограничить область перемещения картинки мышкой внутри контейнера?
Есть контейнер и в нем картинка, которая по размеру больше самого контейнера.
У контейнера установлено свойство overflow: hidden
Нужно сделать так, чтобы мышкой можно было двигать картинку внутри контейнера, но чтобы ограничить область движения так, чтобы между краем картинки и краем контейнера не возникало расстояний.
Пробовал сделать с использованием jquery-ui draggable() и свойство containment: "parent", но оно работает только если дочерний элемент меньше родительского, а если наоборот, то работает некорректно.
Собственно, как это сделать иначе? Можно при помощи плагина.
TCloud, пробовал это сделать. Тогда возникает другой вопрос — как отключить перемещение, когда края картинки и контейнера совпадают, но при этом оставить возможность перемещения в другие стороны?
if (image.left < container.left) { можно двигать вправо }
if (image.left + image.width < container.left + container.width) { можно двигать влево }
Код не настоящий, лишь для демонстрации.
По событию mousedown начинать перемещение, mousemove - выполнять перемещение, mouseup - прекращать перемещение.
Нужно написать четыре условия выхода за границы (по четырем сторонам), если условия не выполняются, ничего не делать.
Если есть возможность того, что картинка будет меньше блока, то условия на границах будут немного другие, нужно будет их написать отдельно.
