## How to Resolve jQuery Drag/Resize Discrepancies with CSS Transform Scale?

jQuery Drag/Resize with CSS Transform Scale

Issue:

Applying CSS transforms (including matrix scaling) to elements causes discrepancies in dragging and resizing operations performed with jQuery's draggable() and resizable() plugins.

Solution:

A user proposed a patch that modified the jQuery plugins, but this solution required editing the plugin files.

Alternative Approach:

Alternatively, you can avoid patching jQuery by using callback handlers in the draggable and resizable configurations. This approach adjusts the new dimensions and positions based on the zoom scale during these events.

Code:

For Resizable:

<code class="js">$(this).resizable({
  minWidth: -(contentElem.width()) * 10,
  minHeight: -(contentElem.height()) * 10,
  resize: function(event, ui) {
    var changeWidth = ui.size.width - ui.originalSize.width;
    var newWidth = ui.originalSize.width + changeWidth / zoomScale;
    var changeHeight = ui.size.height - ui.originalSize.height;
    var newHeight = ui.originalSize.height + changeHeight / zoomScale;
    ui.size.width = newWidth;
    ui.size.height = newHeight;
  }
});</code>

For Draggable:

<code class="js">$(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;
    var newLeft = ui.originalPosition.left + changeLeft / ((zoomScale));
    var changeTop = ui.position.top - ui.originalPosition.top;
    var newTop = ui.originalPosition.top + changeTop / zoomScale;
    ui.position.left = newLeft;
    ui.position.top = newTop;
  }
});</code>

In these code snippets, zoomScale is a global variable representing the current scale of the transformed element.

This solution provides a non-intrusive method to handle dragging and resizing within scaled elements using jQuery's plugins.

The above is the detailed content of ## How to Resolve jQuery Drag/Resize Discrepancies with CSS Transform Scale?. For more information, please follow other related articles on the PHP Chinese website!