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可伸縮容器的容量數組值

回答

相關問題