jQuery UI：可拖动元素的包含有问题

Question

我正在开发的一个网站有图像缩放功能，并且缩放后的图像是可拖动的。

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

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

（很抱歉 URL 中存在空白 - 我是新用户，因此无法发布超过 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 来进行自定义遏制。