Пользовательский интерфейс jQuery: содержит ограничение на перетаскиваемый элемент - PullRequest
Новая
       9

Пользовательский интерфейс jQuery: содержит ограничение на перетаскиваемый элемент

0 голосов
/ 24 февраля 2010

Сайт, на котором я работаю, имеет масштаб изображения, а увеличенное изображение можно перетаскивать.

Проблема в том, что в текущей версии вы можете увеличить масштаб, а затем полностью перетащить изображение из видимой области.

См .: http://testing.successfulsites.co.uk/s5/1.3.5.1.html (и увеличение)

(извините за пробел в URL - я новый пользователь, поэтому не могу опубликовать более 1 ссылки!)

Итак, я пытался получить изображение для содержания.

Подход, который я выбрал, заключается в использовании локализации в div, который я создаю и изменяю в размере на основе текущего уровня масштабирования.

Элемент div обернут вокруг элемента zoom-container и имеет отрицательные поля и положительные отступы для правильного позиционирования.

См .: 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) Есть ли лучший подход к исходной проблеме?

1 Ответ

0 голосов
/ 26 февраля 2010

Это может быть за пределами дизайна опции сдерживания. Я бы попробовал сделать пользовательское ограничение, используя return false в обратном вызове перетаскивания.

...