Giá trị mảng ngăn kéo có thể kéo được cho vùng được chia tỷ lệ

Question

Nếu ai đó có thể giúp tôi tìm ra cách tạo các phần tử có thể kéo trong div thay đổi tỷ lệ dựa trên kích thước cửa sổ, tôi thực sự đánh giá cao bất kỳ hướng dẫn nào.

Nếu tôi làm:

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

Điều gì sẽ xảy ra là nó mang lại cho tôi sự ngăn chặn đối với kích thước thông thường của container. Vì vậy, nếu tôi có một transform: scale(1.5), sẽ có không gian trong vùng chứa mà phần tử có thể kéo không thể đi.

Tôi cũng đã thử containment: 'parent' nhưng điều đó rất khó xử.

EDIT

Tôi đã tìm ra cách để có được ngăn chặn đầu và trái nhưng tôi không thể tìm ra cách để có được quyền và dưới.

var containmentArea = $("#container"); 

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

Tôi đã thử rộng và chiều cao từ containmentArea[0].getBoundingClientRect() nhưng điều đó dường như không phải là bước đi đúng đắn trong hai.

---

Here is a jsfiddle of some example code.

Answer 1

Một phiên bản với thiết lập lại các tọa độ trong trường hợp kéo (vì họ là được tính lại đã cho biến đổi quy mô), mà không sử dụng ngăn chặn:

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

Trong ví dụ chiều rộng và chiều cao của vùng chứa được lấy bên trong kéo, bạn cũng có thể lưu trữ chúng khi mở rộng để có hiệu suất tốt hơn. Bằng cách để chúng được tính toán bên trong sự kiện, chúng vẫn hoạt động sau khi rescaling, mặc dù biến phần trăm vẫn phải được thiết lập. Để thực sự chung chung, nó có thể thu được bên trong sự kiện này (và thay vì một container cố định, ui.helper.parent() có thể được sử dụng) Vì độ lệch bên trong kéo là (0,0) liên quan đến container (ít nhất là đối với thiết lập hiện tại), hãy tự do đơn giản hóa originalleft + (position - originalposition)/percent thành position/percent là cần thiết nữa, vì vậy hãy bỏ nó ra trong fiddle, nhưng có thể được thêm lại nếu cần.

Answer 2

Hãy xem này:

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

Mã thay đổi nội dung là một sau:

// 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)) ] 

    }); 

Như bạn thấy, đây là lừa :

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

Vị trí tối đa bên phải của bạn sẽ là: Khoảng trống chính bên trái + chiều rộng thực của vùng chứa (có tỷ lệ) - chiều rộng đúng của mục (để cho nó nằm trong vùng chứa).

(Mẹo: Hãy tự do để thay đổi "phần trăm" var giá trị như bạn muốn quá xem kết quả)

regex ref

Answer 3

Đây là giải pháp của tôi:

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