Javascript 如何限制。可拖动到缩放div？

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

我有一个按比例缩小（实际大小的40%）的div元素，其中有一个图像。最重要的是，您可以通过鼠标单击来选择图元，并将其四处移动。稍后，可以将图像导出为其原始大小。这很好用

我已经在这里找到了以下代码，这有助于正确缩放鼠标移动：

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",

不起作用。关于如何将区域限制为这个特定元素而不是整个可见屏幕，您有什么建议吗？一个可能的解决办法似乎是：

---

提前谢谢

拖动函数中的代码在内部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,
        };

    }
});

var-click={x:0，y:0}；
$（'.spieler'）.draggable（{
遏制：“测试”，
开始：功能（事件、用户界面）{
单击.x=event.clientX；
单击.y=event.clientY；
},
拖动：函数（事件、ui）{
//这是scale（）的参数
var zoom=0.4；//已根据我的需要进行了调整
var original=ui.originalPosition；
var小部件=$（this.data（'ui-draggable'）；
var containment=widget.containment；
var left=event.clientX-单击.x+original.left；
var top=event.clientY—单击.y+original.top；
//强制遏制
如果（左<包容[0]）左=包容[0]；
如果（顶部<安全壳[1]）顶部=安全壳[1]；
如果（左>安全壳[2]）左=安全壳[2]；
如果（顶部>安全壳[3]）顶部=安全壳[3]；
//jQuery将只使用我们在这里更改的相同对象
ui.position={
左：左/缩放，
顶部：顶部/缩放，
};
}
});

这仅在容器设置为CSS选择器时才起作用。如果使用值数组进行包含，则

包含

变量将相对于文档，而不是偏移父对象。您必须添加额外的代码来更改

包容

变量以删除偏移父级位置，或者只需在

拖动

函数中设置一个全新的

包容

变量，该函数具有相对于偏移父级的位置