jquery可伸缩容器的容量数组值

如果任何人都可以帮助我弄清楚如何让div中包含的可拖动元素根据窗口大小改变比例，我真的很感谢任何指导。jquery可伸缩容器的容量数组值

如果我做的：

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

会发生什么事是它让我对容器的正常大小的遏制。所以如果我有一个transform: scale(1.5)，容器中会有可拖动元素不能移动的空间。

我也试过containment: 'parent'但那会非常糟糕。

编辑

我已经找到了如何让高层和左遏制，但我无法弄清楚如何获得右侧和底部。

var containmentArea = $("#container"); 

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

我已经试过宽度和高度从containmentArea[0].getBoundingClientRect()，但似乎并没有被正确的举措无论是。

Here is a jsfiddle of some example code.

来源

2015-07-10 bryan

不是在dragFix功能（可能的话，你可能会抑制值出现，而不是使用容器）已经看了详细的界限本身并出现我测试它时工作，但需要减去拖动的元素尺寸：'var bounds = container.getBoundingClientRect（）; （）。dragback = $（'。draggable'）[0] .getBoundingClientRect（）.... containment：[bounds.x，bounds.y，bounds.right - dragrect.width，bounds.bottom - dragrect.height] （小提琴：http://jsfiddle.net/z0gqy9w2/4/） –

@ Me.Name嗯，右侧和底部似乎工作，但现在的顶部和左侧没有。编辑拖拽可能是一个可行的解决方案。好想法。 – bryan

哎呀，用x和y代替左右，x和y在firefox中工作，所以没有问题。这也适用于Chrome（也没有测试ie）：'包含：[bounds.left，bounds.top，bounds.right - dragrect.width，bounds.bottom - dragrect.height]'（http：// jsfiddle。 net/z0gqy9w2/5 /）（但是，在dragfix中的工作感觉更通用，稍后可能需要查看） –

一个版本，在拖动事件（重置坐标，因为它们是已被重新计算比例转换），而不使用容器：

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)

Fiddle

在示例中，容器的宽度和高度在dragevent中获得，您还可以在缩放时存储它们以获得更好的性能。通过让它们在事件内部进行计算，它们在重新缩放之后仍然可以工作，但仍需设置百分比变量。为了达到真正的通用性，它也可以在活动内部获得（而不是固定的容器，ui.helper。可以使用parent（））由于dragevent内部的偏移量与容器（至少它是用于当前设置）有关（0,0），因此冒昧将originalleft + (position - originalposition)/percent简化为position/percent 开始偏移似乎没有再次需要它，所以把它留在小提琴中，但如果需要可以重新添加。

来源

2015-07-13 14:58:44

这是边缘完美！非常感谢！！只要它让我支付赏金 – bryan

看看这个：

http://jsfiddle.net/z0gqy9w2/3/

编辑的代码是下列之一：

// 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值，只要你想太多看到的结果）

regex ref

来源

2015-07-12 19:00:49 SerCrAsH

哇@SerCrAsH感谢！你似乎正朝着正确的方向前进。出于某种原因，如果容器处于可滚动的div中，顶部和底部的容器边界似乎会发生故障。 – bryan

写一个'console.log（matches）'并告诉我是否匹配[1] == [2]' – SerCrAsH

而不是匹配我只是'scaleValue = percent'。这是一个坏主意吗？ – bryan

这里是我的解决方案：

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 

     } 

    } 
});

Link to fiddle

来源

2016-07-14 15:38:23 Gab

jquery可伸缩容器的容量数组值

回答

相关问题