jQueryUI:可拖动元素上的包含有缺陷

我正在处理的站点具有图像缩放功能，缩放后的图像可以拖动

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

请参见：（并放大）

（很抱歉URL中存在漏洞-我是新用户，因此不能发布超过1个链接！）

所以，我一直在努力控制图像

我采用的方法是在我正在创建的div上使用包容，并根据当前的缩放级别调整其大小

div环绕缩放容器div，并具有负边距和正填充，以便正确定位自身

请参见：（并放大）

注意：在问题得到解决之前，我并不担心“缩小”上的遏制功能

我在中添加了CSS，以便您可以看到所涉及的各种div

我遇到的问题是，当你放大并拖动图像时，它会被包含在其中，但只有当你的手指离开鼠标按钮时，它才会被包含。。然后控制区域似乎会重置甚至跳跃——这意味着你仍然可以将图像移出观察区域——只是不是一次性的

JS文件在这里：

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;
 };

if（当前缩放>1）{
if（$（'#缩放元容器'）。长度==0）{
$（“#缩放容器”）.wrap（“”）；
变量容器=$（“#缩放元容器”）；
$（“#缩放容器a”）.draggable（{containment:container}）；
$（“#缩放容器”）.addClass（'drag-cursor'）；
};
开关（当前缩放）{
案例1：
css（'margin'，'-20%0-20%'）.css（'padding'，'20%'）；
打破
案例2：
css（'margin'，'-90%0-90%'）.css（'padding'，'90%'）；
打破
案例3：
css（'margin'，'-160%0-160%'）.css（'padding'，'160%'）；
打破
案例4：
css（'margin'，'-210%0-210%'）.css（'padding'，'210%'）；
打破
};

有什么想法吗

1） 我做错了什么

---

2） 如果有更好的方法解决原始问题？

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