Jquery draggable value array values ​​for scalable container

Question

If anyone can help me figure out how to make the draggable elements contained in a div that zooms based on the size of the window, I really appreciate any guidance.

If I do this:

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

What happens will give me restraint for the regular size of the container. Therefore, if I have transform: scale(1.5) , there will be a space in the container into which the drag and drop element cannot go.

I also tried containment: 'parent' , but this is very problematic.

EDIT

I learned how to get the top and left shell, but I can’t figure out how to get it right from the bottom.

 var containmentArea = $("#container"); containment: [containmentArea.offset().left, containmentArea.offset().top, ???, ???] 

I tried the width and height from containmentArea[0].getBoundingClientRect() , but that also doesn't look right.

---

Here is the jsfiddle of some sample code.

Answer 1

Version with resetting coordinates in a drag event (since they were already recalculated for scale transformations), without using a shell:

 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

In the example, the width and height of the container are obtained inside the dragevent, you can also store them when scaling to improve performance. When they are computed inside the event, they still work after scaling, although the percent variable still needs to be set. To be truly universal, it could be obtained inside the event (and instead of a fixed container, you can use ui.helper.parent ()) since the offset inside the dragevent (0,0) associated with the container (at least for the current setting) , allowed to simplify originalleft + (position - originalposition)/percent to position / percent The starting offset does not seem to be needed anymore, so I left it in the violin, but can be added if necessary.

Answer 2

Take a look at this:

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

The edited code is as follows:

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

As you can see, here is the trick:

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

Your right maximum position will be: The main offset of the left container + the true width of the container (with a scale) is the true width of the element (to insert it inside the container).

(Tip. Feel free to change the value of the "percent" var, since you also want to see the results)

regex ref

Answer 3

Here is my solution:

 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 } } }); 

Fiddle reference