如何将.draggable限制为缩放div？

Question

我已经找到了关于这个主题的几个有用的例子，但是现在我无法根据我的需要调整不同的建议。我的问题如下：

我有一个缩小（实际大小的40％）div元素与其中的图像。最重要的是，你可以通过鼠标点击元素来选择元素。稍后，您可以导出图像的原始大小。这工作得很好。

我已经发现了下面的代码在这里SO，它与鼠标移动的适当的比例帮助：

var click = {x:0, y:0}; 

    $('.spieler').draggable({   

     containment: "#test", 

     start: function(event, ui) { 
      click.x = event.clientX; 
      click.y = event.clientY; 
     }, 

     drag: function(event, ui) { 
      // This is the parameter for scale() 
      var zoom = 0.4; //already adjusted for my needs 
      var original = ui.originalPosition; 

      // jQuery will simply use the same object we alter here 
      ui.position = { 
      left: (event.clientX - click.x + original.left)/zoom, 
      top: (event.clientY - click.y + original.top)/zoom, 
      }; 

    } 

}); 

但现在我需要在拖动区域限制在缩放div的区域。

containment: "#test", 

没有工作。你有没有关于如何限制这个特定元素而不是整个可见屏幕的提示？一个可能的解决方案似乎是：http://jsfiddle.net/enHmy/1/ 在此先感谢！

Answer 1

拖动函数中的代码在内部jQuery UI代码之后执行，该代码将位置限制为包含对象。所以，你必须运行一些额外的代码来执行遏制。这应该工作：

var click = {x:0, y:0}; 

$('.spieler').draggable({   

    containment: "#test", 

    start: function(event, ui) { 
     click.x = event.clientX; 
     click.y = event.clientY; 
    }, 

    drag: function(event, ui) { 
     // This is the parameter for scale() 
     var zoom = 0.4; //already adjusted for my needs 
     var original = ui.originalPosition; 
     var widget = $(this).data('ui-draggable'); 
     var containment = widget.containment; 
     var left = event.clientX - click.x + original.left; 
     var top = event.clientY - click.y + original.top ; 

     // Enforce containment 
     if (left < containment[ 0 ]) left = containment[ 0 ]; 
     if (top < containment[ 1 ]) top = containment[ 1 ]; 
     if (left > containment[ 2 ]) left = containment[ 2 ]; 
     if (top > containment[ 3 ]) top = containment[ 3 ]; 

     // jQuery will simply use the same object we alter here 
     ui.position = { 
      left: left/zoom, 
      top: top/zoom, 
     }; 

    } 
}); 

这将只在包含设置为CSS选择器时工作。如果使用包含值的数组，则containment变量将相对于文档而不是偏移父项。您必须添加其他代码，这些代码将更改containment变量以删除偏移父级位置，或者在drag函数中设置一个全新的containment变量，该变量具有相对于偏移父级的位置。