Javascript 缩放容器的jquery可拖动包含数组值

如果有人能帮我弄清楚如何使div中包含的可拖动元素根据窗口大小改变比例，我将非常感谢任何指导

如果我这样做：

element.draggable({ 
    cursor: "move",
    containment: '#container'
});

将会发生的是，它给了我容器常规尺寸的容器。因此，如果我有一个

transform:scale（1.5）

，那么容器中会有可拖动元素无法移动的空间

我也尝试了

包容：'parent'

，但这很容易出错

编辑

我已经找到了如何得到顶部和左侧的包容，但我不知道如何得到右侧和底部

var containmentArea = $("#container");

containment:  [containmentArea.offset().left, containmentArea.offset().top, ???, ???]

我尝试了

containmentArea[0]中的width和height。getBoundingClientRect（）

，但这似乎也不是正确的选择

---

看看这个：

编辑的代码如下所示：

    // Matrix regex to take the scale value property of $('#container') element    
    var matrixRegex = /matrix\((-?\d*\.?\d+),\s*0,\s*0,\s*(-?\d*\.?\d+),\s*0,\s*0\)/,
    matches = $('#container').css('transform').match(matrixRegex);
    // Matches have this value : ["matrix(1.5, 0, 0, 1.5, 0, 0)", "1.5", "1.5"] , so we need matches[1] value :
    var scaleValue = matches[1];
    $(".draggable").draggable({
        cursor: "move",
        start: startFix,
        drag: dragFix,
        containment: [containmentArea.offset().left, containmentArea.offset().top, 
                      ( ( containmentArea.offset().left + ( containmentArea.width() * scaleValue ) ) - ( $(".draggable").width() * scaleValue ) ) ,
                      ( ( containmentArea.offset().top + ( containmentArea.height() * scaleValue ) ) - ( $(".draggable").height()  * scaleValue ) ) ]

    });

如你所见，这里有一个诀窍：

( ( containmentArea.offset().left + ( containmentArea.width() * scaleValue ) ) - ( $(".draggable").width() * scaleValue ) )

您的右最大位置为：主容器左偏移+容器的真实宽度（带刻度）-项目的真实宽度（使其进入容器内）

（提示：可以随意更改“百分比”var值，也可以查看结果）

---

在拖动事件中重置坐标的版本（因为它们已经为缩放变换重新计算），而不使用包含：

var percent = 1, containmentArea = $("#container");

function dragFix(event, ui) {
    var contWidth = containmentArea.width(), contHeight = containmentArea.height();
    ui.position.left = Math.max(0, Math.min(ui.position.left / percent , contWidth - ui.helper.width()));
    ui.position.top = Math.max(0, Math.min(ui.position.top  / percent,  contHeight- ui.helper.height()));
}

$(".draggable").draggable({
    cursor: "move",
    drag: dragFix,
});

//scaling here (where the percent variable is set too)

在示例中，容器的宽度和高度是在DrageEvent内部获得的，您也可以在缩放时存储它们以获得更好的性能。通过在事件内部计算它们，它们在重新缩放后仍然有效，尽管仍然需要设置百分比变量。为了真正通用，它也可以在事件内部获得（并且可以使用ui.helper.parent（）代替固定容器） 由于排水孔内的偏移量与容器相关（0,0）（至少对于当前设置是如此），因此可以自由地将

originalleft+（位置-originalposition）/percent

简化为

position/percent

开始偏移量似乎不再需要了，因此将其保留在小提琴中，但可以根据需要重新添加。

以下是我的解决方案：

var _zoom = 1.2,
    $element = $('.draggable-element'),
    $container = $('#container');

var containmentW,
    containmentH,
    objW,
    objH;

$element.draggable({

    start: function(evt, ui) {
        ui.position.left = 0;
        ui.position.top = 0;

        containmentW = $container.width() * _zoom;
        containmentH = $container.height() * _zoom;
        objW = $(this).outerWidth() * _zoom;
        objH = $(this).outerHeight() * _zoom;

    },

    drag: function(evt, ui) {

        var boundReached = false,

            changeLeft = ui.position.left - ui.originalPosition.left,
            newLeft = ui.originalPosition.left + changeLeft / _zoom,

            changeTop = ui.position.top - ui.originalPosition.top,
            newTop = ui.originalPosition.top + changeTop / _zoom;


        // right bound check
        if(ui.position.left > containmentW - objW) {
            newLeft = (containmentW - objW) / _zoom;
            boundReached = true;
        }

        // left bound check
        if(newLeft < 0) {
            newLeft = 0;
            boundReached = true;
        }

        // bottom bound check
        if(ui.position.top > containmentH - objH) {
            newTop = (containmentH - objH) / _zoom;
            boundReached = true;
        }

        // top bound check
        if(newTop < 0) {
            newTop = 0;
            boundReached = true;
        }

        // fix position
        ui.position.left = newLeft;
        ui.position.top = newTop;

        // inside bounds
        if(!boundReached) {

            // do stuff when element is dragged inside bounds

        }

    }
});

var\u zoom=1.2，
$element=$（'.draggable元素'），
$container=$（“#container”）；
var容器W，
容器，
objW，
objH；
$element.draggable({
开始：功能（evt、ui）{
ui.position.left=0；
ui.position.top=0；
containmentW=$container.width（）*\u缩放；
containmentH=$container.height（）*\u缩放；
objW=$（this）.outerWidth（）*\u zoom；
objH=$（this）.outerHeight（）*\u zoom；
},
拖动：函数（evt、ui）{
var boundreach=false，
changeLeft=ui.position.left-ui.originalPosition.left，
newLeft=ui.originalPosition.left+changelft/\u缩放，
changeTop=ui.position.top-ui.originalPosition.top，
newTop=ui.originalPosition.top+changeTop/\u缩放；
//右边界支票
if（ui.position.left>containmentW-objW）{
newLeft=（containmentW-objW）/\u缩放；
boundreach=true；
}
//左边界支票
if（newLeft<0）{
newLeft=0；
boundreach=true；
}
//下限支票
如果（ui.position.top>containmentH-objH）{
newTop=（containmentH-objH）/\u缩放；
boundreach=true；
}
//上限支票
if（newTop<0）{
newTop=0；
boundreach=true；
}
//定位
ui.position.left=newLeft；
ui.position.top=newTop；
//界内
如果（！boundreach）{
//在边界内拖动元素时执行操作
}
}
});

---

没有详细查看dragFix函数（可能，您可以限制那里的值，而不是使用包含），当我测试它时，边界本身看起来确实有效，但需要减去拖动的元素维度：

var bounds=container.getBoundingClientRect（）；var dragrect=$（'.draggable'）[0]。getBoundingClientRect（）。。。。包容：[bounds.x，bounds.y，bounds.right-dragrect.width，bounds.bottom-dragrect.height]

（fiddle:）@Me.Name-Hmm，右侧和底部似乎起作用，但现在顶部和左侧不起作用。编辑dragfix可能是一个可行的解决方案。好主意。哦，用x和y代替了左和右，x和y在firefox中工作，所以没有问题。这也适用于Chrome（尚未测试ie）：

containment:[bounds.left，bounds.top，bounds.right-dragrect.width，bounds.bottom-dragrect.height]

（）（尽管如此，在dragfix中完成这项工作感觉更一般，以后可能会看一眼）@Me.Name感谢您对这一点的关注！如果.Wow@SerCrAsH失败了，这就不能完全起作用。谢谢！你似乎走对了方向。由于某种原因，如果容器位于可滚动的div中，则顶部和底部的容器边界似乎会出现问题。请编写

console.log（matches）

，并告诉我

是否匹配[1]==[2]

而不是我刚才所做的匹配

scaleValue=percent

。这是一个坏主意吗？如果它对您来说是值得的，我认为该百分比将是一个动态值，并且您硬编码了它。：）谢谢你的关注。这是一个动态值，但

var%得到更新：）。我认为偏移量对我来说是一团糟，因为我的容器在一个可滚动的div中。如果我在拖动
.draggable
时看不到页面的底部，它将没有底部边界。如果我在拖动页面时看到的是页面的底部而不是顶部，那么顶部边界将显示在页面的中间位置（如果有意义的话）。这是一个完美的边界！非常感谢你！！一旦赏金允许我，我会马上给他报酬