jQuery Drag/Resize with CSS Transform Scale

by

It’s been a while since this question was asked. I have found (actually created) an answer. All it requires is setting callback handlers. No editing jquery-ui needed!

Note: zoomScale in this example is a global variable and the transform is set using animate (aided by jquery.transform.js) like so:

target.animate({
    transform: 'scale(' + zoomScale + ')'
});

Take a look at this:

transform scale() fix for resizable:

$(this).resizable({
    minWidth: -(contentElem.width()) * 10,  // these need to be large and negative
    minHeight: -(contentElem.height()) * 10, // so we can shrink our resizable while scaled
    resize: function(event, ui) {

        var changeWidth = ui.size.width - ui.originalSize.width; // find change in width
        var newWidth = ui.originalSize.width + changeWidth / zoomScale; // adjust new width by our zoomScale

        var changeHeight = ui.size.height - ui.originalSize.height; // find change in height
        var newHeight = ui.originalSize.height + changeHeight / zoomScale; // adjust new height by our zoomScale

        ui.size.width = newWidth;
        ui.size.height = newHeight;

    }
});

transform scale() fix for draggable:

$(this).draggable({
    handle: '.drag-handle',
    start: function(event, ui) {
        ui.position.left = 0;
        ui.position.top = 0;
    },
    drag: function(event, ui) {

        var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
        var newLeft = ui.originalPosition.left + changeLeft / (( zoomScale)); // adjust new left by our zoomScale

        var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
        var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale

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

    }
});

Let me know if you find any problems or further improvements on this. 🙂

Reference: jQuery-UI resizable/draggable with transform: scale() set

More Related Contents:

  1. animating addClass/removeClass with jQuery
  2. Using jQuery how to get click coordinates on the target element
  3. Trees in Twitter Bootstrap [closed]
  4. Change CSS properties on click
  5. Add a transform value to the current transforms that are already on the element?
  6. Bootstrap and jQueryUI Conflict
  7. Change from (+) symbol to (-) after click (function(){
  8. How can i create html automatic change page? [duplicate]
  9. Can jQuery get all CSS styles associated with an element?
  10. Change CSS of selected text using Javascript
  11. $(document).ready(function() VS $(function(){ [duplicate]
  12. Modifying CSS class property values on the fly with JavaScript / jQuery
  13. Get computed font size for DOM element in JS
  14. Disable dragging an image from an HTML page
  15. Am I using too much jQuery? When am I crossing the line?
  16. CSS3-Animate elements if visible in viewport (Page Scroll)
  17. Open a new javascript window(.open) along with its CSS styling
  18. How to use javascript conditionally like CSS3 media queries, orientation?
  19. How to create a responsive image that also scales up in Bootstrap 3
  20. Fullpage.js. Adding a scroll delay
  21. How to check if css value is supported by the browser?
  22. How do I make a move up and down when I’m scrolling the page?
  23. How to show live preview in a small popup of linked page on mouse over on link?
  24. Fade background image in and out with jQuery?
  25. Convert dropdown to selection boxes with color and trigger drop down action
  26. How to change tabs programmatically in jquery-ui 1.9?
  27. How to keep elements non-refreshed
  28. How do you swap DIVs on mouseover (jQuery)?
  29. Jquery/Javascript Opacity animation with scroll
  30. Can I save input from form to .txt in HTML, using JAVASCRIPT/jQuery, and then use it?

Leave a Comment