Сайт, над которым я работаю, имеет масштабирование изображения, а увеличенное изображение перетаскивается.jQuery UI: ограничение на элемент перетаскивания является ошибкой
Проблема в том, что в текущей версии вы можете увеличить масштаб, а затем полностью перетащить изображение из области просмотра.
См: http://testing.successfulsites.co.uk/s5/1.3.5.1.html (и увеличение)
(извините о разрыве в URL - Я новый пользователь поэтому не может размещать более 1 ссылка!)
Итак, я мы пытались скрыть изображение.
Подход, который я принял, заключается в использовании сдерживания на div, который я создаю и изменяя размер, исходя из текущего уровня масштабирования.
Разделение завершено вокруг div-контейнера масштабирования и имеет отрицательные поля и положительную прокладку, чтобы правильно позиционировать себя.
См: http://testing.successfulsites.co.uk/s6/1.3.5.1.html (и увеличение)
Примечание: Я не беспокоили с функциональностью сдерживания на «уменьшить» - до тех пор, пока проблема не будет исправлена.
Я добавил CSS, чтобы вы могли видеть различные задействованные div.
Проблема, с которой я сталкиваюсь, заключается в том, что когда вы увеличиваете масштаб и перетаскиваете изображение, которое оно содержится, но ТОЛЬКО, пока вы не отпустите свой палец от кнопки мыши .., а затем область сдерживания, кажется, сбросит и даже скачет - значит, вы может перемещать изображение с области просмотра все еще - просто не за один раз.
Файл JS здесь:
http://testing.successfulsites.co.uk/s6/assets/js/functions.js
CSS-здесь:
http://testing.successfulsites.co.uk/s6/assets/style/main.css
Вот соответствующий код:
В следующей функции ...
$("#in").live("click",function() {
я следующий код ...
if(currentZoom > 1) {
if ($('#zoom-meta-container').length == 0) {
$('#zoom-container').wrap('<div id="zoom-meta-container"></div>');
var container = $('#zoom-meta-container');
$('#zoom-container a').draggable({ containment: container });
$('#zoom-container').addClass('drag-cursor');
};
switch (currentZoom) {
case 1:
container.css('margin','-20% 0 0 -20%').css('padding','20%');
break;
case 2:
container.css('margin','-90% 0 0 -90%').css('padding','90%');
break;
case 3:
container.css('margin','-160% 0 0 -160%').css('padding','160%');
break;
case 4:
container.css('margin','-210% 0 0 -210%').css('padding','210%');
break;
};
Любые идеи ..
1) Что я делаю неправильно?
2) Если есть лучший подход к исходной проблеме?