javascript - 如何将 .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变量来删除偏移父位置或只是设置一个全新的 containment drag 内的变量具有相对于偏移父级的位置的函数。