Question

我正在处理的网站有图像缩放功能，缩放的图像可以拖动。

问题是，在当前版本中，您可以放大，然后将图像完全拖出可视区域。

请参阅：http://testing.successfulsites.co.uk/s5/1.3.5.1.html（并放大）

（抱歉网址有差距 - 我是新用户，因此无法发布超过1个链接！）

所以，我一直试图让图像得到控制。

我采用的方法是根据当前缩放级别对我正在创建和调整大小的div使用包含。

div围绕zoom-container 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）如果有更好的解决原始问题的方法吗？

Answer 1

这可能超出了收容选项的设计范围。我会尝试通过在拖动回调中使用return false来进行自定义包含。

jQuery UI：对可拖动元素的封闭是错误的

1 个答案: