jQuery UI：可拖动元素的遏制是错误的

Question

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

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

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

（对不起，网址中的空白 - 我是新用户，所以不能发布超过 1 个链接！）

所以，我一直试图让图像被包含。

我采用的方法是在我正在创建和调整大小的 div 上使用包含，基于当前缩放级别。

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) 是否有更好的方法来解决原始问题？

Answer 1

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